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图 灵 社 区 的 电子 书 没有 采用 专 有 
= 

用 目 己 喜欢 的 浏览 器 和 PDF 阅读 
器 进行 阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ， 未 经 授权 ， 不 得 进行 传播 。 


我 们 原意 相信 读者 具有 这 样 的 良 
知 和 觉悟 ， 与 我 们 共同 保护 知识 
产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 
能 对 该 用 户 买 施 包括 但 不 限于 天 
财 该 帐号 等 维权 措施 ， 并 可 能 扎 
究 法 律 责任 。 
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内 容 提 要 


Bootstrap 是 Mark Otto 和 Jacob Thornton 在 Twitter 公司 共同 开发 的 一 个 网 站 开发 框架 ， 
2011 年 8 月 发 布 至 今 已 经 成 为 Github 上 最 受 关注 的 开源 项 目 。 从 最 初 CSS 驱动 的 项 目 到 目前 
内 置 很 多 JavaScript 插件 和 图 标 ， 并 且 泣 盖 表 单 和 按钮 元 素 、 文 持 啊 应 式 Web ixit, Bootstrap 
为 Web 开发 提供 了 前 脆性 的 设计 和 开发 基础 ， 能 够 大 幅 提 升 开发 效率 , 已 被 很 多 流行 网 站 采用 。 
本 书 全 面 介绍 了 Bootstrap 为 前 端 开发 提供 的 所 有 工具 ， 包 括 网 格 布 局 系统 、 预 定义 CSS 样式 、 
内 置 界面 组 件 和 交互 式 JavaScript 插件 。 

本 书 内 容 系 统 、 结 构 完 整 、 讲 解 简明 、 方 便 实用 ， 是 前 端 开 发 人 员 使 用 Bootstrap 的 最 佳 参 
考 书 ， 适 合 所 有 前 端 开 发 人 员 和 希望 了 解 Bootstrap 的 读者 阅读 参考 。 
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我 在 Mac 面世 之 前 就 开发 软件 了 ， 因 此 我 记得 当时 技术 界 的 反应 。 很 
大 程度 上 ， 技 术 圈 的 人 都 对 此 不 太 感 冒 。 有 意思 的 是 ， 今 天 很 多 人 对 
Bootstrap 的 负面 影响 议论 纷纷 ， 像 极 了 1984 年 人 们 对 Mac BJ TRTH 5& 
点 。 但 两 个 事件 中 一 致 的 是 ， 人 们 不 喜欢 的 东西 ， 对 他 们 却 非常 重要 。 


平 末 意识 到 有 些 事 所 有 软件 都 必须 做 ， 那 为 什么 这 些 软 件 不 采用 相同 
的 方法 来 做 呢 ? 如 采 能 做 到 这 一 点 ， 开 发 和 调试 束 容 多 多 了 ， 而 更 重 
要 的 征 ， 用 起 来 也 就 容易 多 了 ! 如 东 只 有 一 种 创建 菜单 的 方式 ， 那 么 
用 户 只 要 在 一 个 应 用 上 学 会 使 用 菜单 ， 就 会 使 用 任何 应 用 中 的 菜单 
f. EAE. ELI. A., BUR. TTEDEL. SIR, ÉD TER? 


那 时 ， 程 序 员 (包括 我 ， 之 所 以 不 喜欢 Mac， 是 因为 觉得 它 要 拿 我 们 做 
过 的 东西 转变 成 商品 去 卖 钱 。 另 外 ， 这 种 大 一 统 的 方式 存在 局 限 性 。 有 
一 些 应 用 的 春 面 元 素 并 不 规范 。 怎 么 办 ? 好 ， 你 目 己 来 改 ， 只 能 这 样 。 


这 在 技术 上 就 叫 重 构 。 如 采 你 发 现 目 己 一 过 一 过 地 在 重复 做 一 件 事 ， 
不 妨 再 努力 一 次 做 得 更 好 一 点 ， 做 出 个 API 来 ， 保 证 它 灵 活 好 用 。 然 
后 ， 就 再 也 不 用 重复 了 。 这 正 生 软件 也 能 写 得 像 摩天 大 楼 那样 高 大 复 
杂 的 奥秘 。 五 年 前 最 前 治 的 技术 如 今 已 经 融入 了 操作 系统 。 这 就 是 进 
步 ， 这 样 多 好 啊 ! 


同样 的 情形 在 网 站 开发 过 程 也 随处 可 见 。 事 实 上 ， 以 Mac 当年 对 未 来 














Xl 


的 愿景 观 之 ，Web 开发 领域 重复 元 动 以 及 开发 环境 的 落后 程度 契 令 人 
IHK. ZR, Bootstrap 至 少 担负 起 了 重 构 的 贡 任 。 如 采 我 起 做 个 菜 
单 ， 那 就 用 它 来 做 好 了 。 没 蚀 ， 我 的 苹 单 跟 别 人 的 没什么 区 别 。 但 这 对 
用 户 是 好 事 儿 啊 。 用 户 不 用 再 学 习 第 二 种 菜单 、 第 三 种 菜单 的 用 法 了 。 


Bootstrap 古人 必需 的 、 绝 对 必要 的 ， 它 的 迅速 普及 就 是 明证 。 不 光 我 的 
服务 絮 问 软件 会 用 到 它 ， 我 开发 的 模板 语言 里 也 少不了 它 ， 这 样 只 
用 户 想 使 用 Bootstrap， 随 时 随地 用 就 可 以 了 。 什 么 也 不 用 做 ， 也 不 用 
包含 什么 库 。 就 像 服务 避 硬 件 的 一 部 分 ， 跟 乎 采 1984 FE Mac OS 上 
所 做 的 一 样 。 


跟 所 有 重要 的 技术 一 样 ，Bootstrap 只 是 “ 够 好 ”而 已 ， 并 非 完美 。 换 
句 话说 ，Mark Otto 和 Jacob Thornton 还 可 以 让 目 己 的 重 构 更 上 一 层 
楼 。 然 而 ,假如 他 们 不 断 追 求 让 代码 更 人 简洁、 外 观 更 漂亮 ， 那 恕 怕 就 
没有 那么 好 用 了 。Bootstrap 为 你 我 这 样 忙 于 写 网 站 的 人 彻底 解决 了 用 
户 界 面 的 问题 。 


不 过 ， 我 认为 这 只 是 开始 。 我 预感 到 Bootstrap 会 成 为 Web 的 一 个 
组 件 ， 或 者 说 它 很 可 能 出 现在 你 会 用 到 的 所 有 开发 工具 中 。 有 朝 一 
日 一 一 应 该 不 会 太 人 和信， 设计 人 员 将 能 够 不 修改 任何 样式 和 脚本 ， 束 给 
整个 网 站 换 一 次 皮肤 。 我 没 发 现 使 用 Bootstrap 会 市 来 什么 局 限 性 。 
Bootstrap 不 能 取代 设计 师 ， 相 反 ， 它 是 设计 师 手 中 的 利 颖 ， 也 拓展 了 
设计 师 的 想象 空间 。 


今天 ， 能 在 O'Reilly 出 一 本 书 往往 标志 着 一 种 新 技术 走 同 成 熟 。 现 
Æ, Bootstrap 的 书 也 出 版 了 。 作 者 Jake Spurlock 是 一 位 Web 开发 人 
员 ， 已 经 使 用 Bootstrap 写 了 很 多 网 站 ， 并 在 技术 大 会 上 分 享 过 他 的 经 
验 。 我 很 采 玛 ， 据 说 他 是 在 看 了 我 写 的 一 系列 博客 文章 之 后 才 决 定 使 用 
Bootstrap 的 。 现 在 ， 我 非常 高 兴 地 把 他 的 书 推荐 给 各 位 谈 者 。 来 听 听 他 
为 大 家 讲解 Bootstrap 的 魔法 吧 ， 让 目 己 也 拥有 推动 世界 进步 的 魔力 | 











Dave Winer 
Scripting News 编辑 
2013 年 1 月 于 纽约 
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Bootstrap 是 一 个 用 于 构建 啊 应 式 网 站 的 前 端 框架 。 无 论 你 想 构 建 应 用 
程序 、 博 客 还 是 CMS 网 站 ，Bootstrap 都 完美 适用 ， 只 要 你 想得到 ， 
它 都 能 行 。Bootstrap 把 HTML, CSS 和 JavaScript 组 合 起 来 ， 为 构建 
稳定 的 网 站 提供 了 基础 设施 ， 也 能 提高 开发 效率 。 基 于 默认 的 网 格 系 
统 ， 布 局 变 成 了 小 达 一 碟 ， 按 钮 、 导 航 和 表格 也 都 笑 脱 脱 地 质心 悦目 。 
十 几 个 JavaScript 插件 更 为 我 们 赋予 网 站 交互 能 力 提供 了 强大 保障 。 


zh 

读者 对 象 

本 书 读者 应 该 对 HTML、CSS 和 JavaScript 都 比较 熟悉 ， 而 且 对 构建 
Wu xh. BH Bootstrap 的 JavaScript 插件 ， 以 及 使 用 流行 的 开源 
框架 创建 网 站 充满 好 奇 心 。 


不 适合 谁 

本 书 不 适合 能 看 懂 Bootstrap 文档 的 读者 。 与 很 多 人 一 样 ， 我 也 是 从 在 
线 文档 学 起 的 ， 当 时 使 用 的 是 Bootstrap 1.3， 后 来 就 升级 到 Bootstrap 
1.4。 然 后 ， 我 又 基于 Bootstrap 2.0 建 了 一 个 大 网 站 。 如 果 你 喜欢 编写 
语义 化 的 HTML， 使 用 Bootstrap 没 错 。 
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T a LE 
术 书 守旧 
An UH RS HTML, CSS 和 JavaScript 的 经 验 ， 本 书 可 以 作为 你 编 
写 灵 活 代 码 和 啊 应 式 网 站 的 参考 。 当 然 ， 相 关 的 概念 和 语法 都 很 向 
单 ， 因 为 本 书 也 遵循 语义 HTML 和 CSS 的 风格 。 


本 书 内 容 


本 书 讨论 了 使 用 Bootstrap 构建 网 站 ， 从 基本 的 项 目 和 文件 结构 开始 ， 
然后 是 网 格 系统 和 布局 方式 ， 再 后 来 讨论 HTML 元 素 特 别 是 表单 、 表 
格 、 按 钮 等 界面 元 素 。 在 对 Bootstrap 有 了 基本 的 理解 之 后 ， 我 们 会 讨 
论 漂亮 的 导航 条 、 面 包 届 式 导 航 、 媒 体 对 象 等 。 接 着 JavaScript 插件 
登场 ， 比 如 下 拉 末 单 、 传 送 带 、 模 态 框 ， 它 们 为 网 站 提供 了 交互 功能 。 


为 什么 写 这 本 书 
我 不 是 Bootstrap 专家 ， 把 自己 当成 专家 可 不 得 了 ， 写 成 这 样 就 不 行 了 。 


我 就 是 一 个 普通 的 开发 人 人员， 通过 Dave Winer 的 博客 知道 了 
Bootstrap。 我 觉得 不 错 ， 就 在 新 网 站 中 使 用 了 Bootstrap 。 我 感觉 有 必 
要 跟 大 家 分 享 自己 使 用 Bootstrap 的 心得 。 希 望 我 从 一 个 初学 者 角度 
写 的 这 本 书 ， 能 够 帮 更 多 人 认识 到 Bootstrap 的 价值 ， 希望 自己 的 经 
历 对 大 家 有 用 ， 也 请 专家 们 批评 指正 。 


其 他 资源 
看 书 或 许 并 不 是 学 习 Bootstrap 的 唯一 方式 。 这 取决 你 想 学 什么 ， 或 
者 为 什么 学 。 


如 果 你 只 想 初 步 了 解 Bootstrap， 那 么 其 在 线 文档 已 经 足够 了。Jacob 
Thornton 和 Mark Otto 为 此 提供 了 很 多 精美 的 示例 、HTML 片段 及 其 
他 对 你 入 门 有 帮助 的 信息 。Bootstrap 的 在 线 文 档 写 得 很 好 ， 本 书 结构 
也 参考 了 该 文档 。 



































如 末 你 想 对 这 个 开源 项 目 做 点 页 献 ， 可 以 在 GitHub 上 提交 请 求 或 使 
用 跟踪 程序 ， 获 得 项 目的 更 新 、 下 载 、 文 档 。 





Bootstrap iE € {RI 


如 果 你 只 想 找 JavaScript 插件 或 CSS 3& & x fF, Bootstrap 可 能 就 大 大 
了 了。 如果 你 只 是 不 喜欢 Bootstrap 的 默认 界面 元 素 ， 那 不 要 紧 ， 因 为 
你 可 以 轻易 定制 这 些 元 奈 的 外 观 ， 而 且 去 挥 相关 的 标签 也 易 如 反 筝 。 
如 果 你 想 快速 构建 啊 应 式 网 站 ，Bootstrap 绝对 是 明确 的 选择 。 


排版 约定 
本 书 使 用 的 排版 约定 如 下 。 
。 楷体 
表示 新 的 术语 。 
。 等 宽 字体 
表示 程序 族 段 ， 也 用 于 在 正文 中 表示 程序 中 使 用 的 变量 、 国 数 名 、 
命令 行 代 码 、 环 境 变 量 、 语 句 和 关键 词 竺 代码 文本 。 
。 加 粗 的 等 宽 字 体 
表示 应 该 由 用 户 逐 字 输 入 的 命令 或 者 其 他 文本 。 
。 倾斜 的 等 宽 字 体 
表示 应 该 由 用 户 输 入 的 值 或 由 上 下 文 决定 的 值 禁 换 的 文本 。 


ow 
这 个 图 标 代 表 小 窍门 、 建 议 或 说 明 。 
2 














这 个 图 标 代 表 警 告 信 息 。 





使 用 代码 


本 书 就 是 要 帮 读 者 解决 实际 问题 的 。 也 许 你 需要 在 自己 的 程序 或 文档 
中 用 到 本 书 中 的 代码 。 除 非 大 段 大 段 地 使 用 ， 否 则 不 必 与 我 们 联系 取 
得 授权 。 因 些 ， 用 本 书 中 的 几 段 代码 写成 一 个 程序 不 用 向 我 们 申请 许 
可 。 但 是 销售 或 者 分 发 O'Reilly 图 书 随 附 的 代码 光盘 则 必须 事先 获得 
授权 。35| 用 书 中 的 代码 来 回答 问题 也 无 需 我 们 授权 。 将 大 上 段 的 示例 代 
码 整合 到 你 自己 的 产品 文档 中 则 必须 经 过 许可 。 


使 用 我 们 的 代码 时 ， 和 希望 你 能 标明 它 的 出 处 。 出 处 一 般 要 包含 书 名 、 
作者 、 出 版 商 和 ISBN， 例 如 : Bootstrap by Jake Spurlock (O'Reilly). 
Copyright 2013 Jake Spurlock, 978-1-449-34391-0。 





如 林 还 有 其 他 使 用 代码 的 情形 需要 与 我 们 沟通 ， 可 以 随时 与 我 们 联 


系 : permissions @oreilly.com, 


* LE 
欢迎 指正 
希望 读者 可 以 通过 本 书 学 到 想 学 的 东西 ， 同 时 也 希望 你 能 帮助 别人 学 
^] Bootstrap。 帮 助 别人 的 方式 有 很 多 种 。 


。 发 现 本 书 有 技术 问题 或 者 解释 不 清 ， 或 其 他 可 以 改进 的 地 方 ， 请 提 
交 勘 误 。 

。 如 果 你 喜欢 (或 不 喜欢 ) KEB, 请 写 出 书评 。 可 以 直接 在 Amazon. 
com 或 O'Reilly 网 站 本 书页 面 上 留言 。 指 出 哪些 地 方 讲 得 清楚 ， 哪 
些 地 方 还 不 够 清楚 ， 对 其 他 读者 和 我 都 将 有 很 大 帮助 。 

。 如 果 你 想 分 享 学 习 Bootstrap 的 心得 ， 请 付 诸 行 动 ， 你 可 以 写 博 客 、 
发 微 博 、 写 书 、 搞 培训 ， 怎 么 都 行 。 


我 会 尽力 根据 勘误 和 评论 更 新 这 本 书 。 就 算 书 已 经 印刷 上 市 ， 我 也 会 
在 新 版 本 中 更 正 。 要 是 你 购买 了 电子 版 ， 可 以 免费 获得 新 版 本 。 我 儿 
得 这 本 书 不 会 升级 太 快 ， 除 非 Bootstrap 有 很 大 变化 。 但 愿 这 本 书 能 
让 旋 者 朋友 有 所 收获 ， 激 发 你 分 享 的 兴趣 。 














Safari? Books Online 


e e$ Safari Books Online (www.safaribooksonline. 
Safa FP] om 是 应 需 而 变 的 数字 图 书馆 。 它 同时 
Books Online 以 图 书 和 视频 的 形式 出 版 世界 顶级 技术 和 

商务 作家 的 专业 作品 。 


Safari Books Online 是 技术 专家 、 软 件 开 发 人 员 、Web 设计 师 、 商 
务 人 士 和 创意 人 士 开 展 调研 、 解 决 问题 、 学 习 和 认证 增 训 的 第 一 手 
资料 。 

对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 
组 合 和 灵活 的 定价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 
统 ij I] O'Reilly Media, Prentice Hall Professional, Addison-Wesley 


Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal 








Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, 
IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, 
New Riders, McGraw-Hill, Jones & Bartlett, Course Technology LJ. 及 
其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正式 出 版 之 前 的 书稿 。 
要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 


美国 。 
O'Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 
800-998-9938. 〈 从 美国 和 加 拿 大 拨打 ) 
707-829-0515 (在 本 地 或 从 其 他 国家 拨打 ) 
707-829-0104 (传真 ) 
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中 国 : 
北京 市 西城 区 西直门 南大 街 2 写成 铭 大 厦 C 座 807 (100035) 
奥 末 利 技术 咨询 (北京 ) 有 限 公司 

O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信 

息 ， 包 括 勘 误 表 、 示 例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 古 : 
http://shop.oreilly.com/product/0636920027867.do 


中 文 版 地 址 : 
http://www.oreilly.com.cn/index.php?func-book&isbn-978-7-115-32735-2 
对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 
bookquestions G oreilly.com 
要 了 解 更 多 O'Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 
下 网 站 
http://www.oreilly.com 
我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 


http://www.youtube.com/oreillymedia 


致谢 
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Bootstrap 提 供 的 网 站 框架 


1.1 Bootstrap 到 底 是 什么 


Bootstrap 是 Mark Otto 和 Jacob Thornton 共同 开发 的 一 个 开源 框架 。 
wI A A Bootstrap 的 时 候 ， 他 们 两 位 都 在 Twitter 工作 。 当 时 ， 他 
们 面临 着 为 公司 内 部 提供 一 父 标 准 化 的 前 端 开发 工具 的 需求 。 在 发 布 
Bootstrap 的 那 篇 博客 中 ，Mark Otto 这 样 介绍 他 们 的 新 项 目 : 


Twitter 诞生 初期 ， 为 了 完成 前 痛 开 发 任务 ， 工 程 师 们 几乎 尝试 

了 自己 熟 六 的 所 有 库 。 应 用 之 间 的 不 一 致 性 导致 它们 难以 扩 
展 和 维护 。Bootstrap 最 初 就 是 这 个 问题 的 一 个 解决 万 生 ， 而 且 
在 Twitter 内 部 第 一 次 Hackweek 上 得 到 了 认可 。Hackweek 结 来 
后 ， 我 们 手头 上 的 项 目 已 经 相当 稳定 ， 可 以 在 公司 内 部 部 署 使 
mi, 


— —Mark Otto 
https://dev.twitter.com 


Bootstrap 是 2011 年 8 月 发 布 的 ， 发布 之 后 就 巨 速 走红 。 而 且 ， 它 也 
从 最 初 CSS 驱动 的 项 目 ， 发 展 到 内 置 了 很 多 JavaScript 插件 和 图 标 ， 
并 且 洱 盖 了 表单 和 按钮 元 素 。Bootstrap 本 身 支 持 啊 应 式 Web ixit, 
而 且 拥 有 一 个 非常 稳健 的 12 列 、940 像素 宽 的 网 格 布局 系统 。 值 得 一 
提 的 是 ，Bootstrap 网 站 (http://getbootstrap.com) 上 还 提供 了 一 个 构 
建 工具 ， 让 你 根据 目 己 的 需求 选择 CSS 和 JavaScript 功能 。 所 有 这 一 
UJiEBi9m Web 开发 有 了 前 瞻 性 的 设计 和 开发 基础 ， 开 发 效率 倍增 。 上 
手 使 用 Bootstrap 非常 简单 ， 跟 在 网 站 中 整合 CSS 和 JavaScript 没有 
什么 区 别 。 


对 于 新 项 目 ，Bootstrap 则 提供 了 一 整套 有 用 的 基本 要 素 。 一 般 来 
说 ， 我 在 着 手 开 发 新 项 目的 时 候 ， 都 会 整合 Eric Meyer 的 Reset CSS 
(http://meyerweb.com/eric/tools/css/reset/) 等 一 些 工 具 。 上 自从 有 了 
Bootstrap, ， 只 要 在 网 站 中 引入 bootstrap.css 这 个 CSS 文件 ， 或 者 再 
加 上 bootstrap.js 这 个 JavaScript 文件 ， 整 个 项 目的 基础 平台 束 搭 建 
好 了 。 











1.2 ”Bootstrap 的 文件 结构 


bootstrap/ 
I— css/ 
bootstrap.css 


上 一 
- bootstrap.min.css 
上 一 


bootstrap.js 
I— bootstrap.min.js 
| 一 img/ 
| I— glyphicons-halflings.png 
| |I— glyphicons-halflings-white.png 
L—— README .md 


| 
| 
E 
| 


下 载 之 后 的 Bootstrap BAZAR: css, js fü img, WREE L, 
请 大 家 把 这 三 个 文件 夹 放 到 项 目 根 目 m CSS 和 JavaScript 文件 分 
别 有 一 个 压缩 版 ， 可 以 根据 需要 选择 一 个 版 本 ， 没 必要 在 项 目 中 同时 
包含 两 个 版 本 。 我 一 般 开 发 时 使 用 未 压缩 版 ， 而 在 发 布 时 使 用 压 纵 
版 本 。 


1.3 ”基本 的 HTML 模 板 


一 般 Web 项 目的 HTML 文件 如 下 所 示 : 





<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
</head> 
<body> 
<h1>Hello, world!</h1> 
</body> 
</html> 


使 用 Bootstrap 时 ， 则 要 包含 它 的 CSS 样式 表 和 JavaScript 文件 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
«link href="css/bootstrap.min.css" rel="stylesheet"> 
</head> 





Bootstrap 提 供 的 网 站 框架 | 3 


<body> 
<h1>HeLLo，worLd!</h1> 
«script src="js/bootstrap.min.js"></script> 
</body> 
</html> 


»J 3 


别 忘 了 HTMLS5 的 文档 类 型 声明 。 
x 只 要 包含 <!DOCTYPE htmL>， 所 有 现代 浏览 器 都 启动 标准 模式 。 


1.4 全 局 样式 


Bootstrap 预定 义 了 一 些 样式 。Bootstrap 1.0 使 用 的 是 以 前 的 重 置 样 
式 表 ， 但 Bootstrap 2.0 则 使 用 Nicolas Gallagher 写 的 Normalize.css 
(http://necolas.github.com/normalize.css/), HTMLS Boilerplate 
(http://html5boilerplate.com/) 使 用 的 也 是 这 个 样式 表 。 这 个 样式 表 包 
ETE bootstrap.css 中 。 





特别 值得 注意 以 下 几 种 默认 样式 ， 它 们 专门 针对 排版 和 链接 : 


。 从 body FAH f margin, XX FETAL: ESI DI, ar sp I 3 2X s 

。 JJ body MH] f background-color: white;; 

e Bootstrap LÀ QbaseFontFamily, QbaseFontSize 和 QbaseLineHeight 
属性 作为 排版 的 基准 , 确保 整个 网 站 的 标题 及 其 他 内 容 的 行 高 一 致 ; 

e Bootstrap 通过 QlinkColor 设置 全 局 链接 颜色 ， 只 在 :hover 状态 下 
给 链接 次 加 下 划 线 。 


X a 





| 记 住 ， 要 修改 默认 颜色 ， 可 以 直接 修改 相应 .less 文件 中 的 
、 全 局 变量 值 。 要 么 修改 scaffolding.less 文件 ， 要 么 修改 你 


目 己 的 样式 表 。 


1.5 默认 网 格 系统 


Bootstrap 默认 的 网 格 布局 (图 1-1) 包含 12 列 ，940 像素 宽 ， 不 
支持 响应 式 布局 。 加 载 响应 式 CSS 文件 后 ， 网 格 布局 会 根据 视 口 





(viewport) 宽度 在 724 像素 到 1170 像素 之 间 伸 缩 。 视 口 宽 度 小 于 
767 像素 上 时， 说明 是 平板 电脑 或 更 小 的 设备 ， 布 局 中 的 列 会 垂直 堆 释 
起 来 。 默 认 宽 度 下 ， 每 列 宽 60 像素 ， 且 向 左 平移 20 像素 。 图 1-1 展 
示 了 12 列 时 的 情况 














图 1-1: 默认 的 网 格 


1.5.1 基本 网 格 的 HTML 


创建 简单 布局 时 ， 给 作为 行 的 «div» JI .row 类 ， 给 作为 列 的 <div> 
添加 表示 横 跨 多 少 列 的 .span* 类 即 可 。 因 为 网 格 布局 可 以 包含 12 列 ， 
所 以 .span* 中 的 * 加 起 来 必须 等 于 12。 这 样 ， 可 以 设计 出 3-6-3, 
4-8、3-S-4、2-8-2 布局 ， 你 懂 了 吧 ? 


下 和 面 的 代码 使 用 了 .span8 FU .span4, ARIS 12 列 : 


«div class="row"> 
«div class="span8">...</div> 
«div class="span4">...</div> 
</div> 


1.5.2 平移 列 
使 用 .offsetx* 类 可 以 问 右 平移 列 ，* 用 于 指定 平移 的 列 数 。 比 如 ， 下 
面 代 码 中 的 .offset2 会 导致 .span7 癌 右 平移 2 列 CU, Es] 1-2) : 
«div class="row"> 
«div class-"span2"»...«/div» 


«div class="span7 offset2'"»...«/div» 
</div> 
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5 span2 offset1 span3 offset 


2 span/ offset? 


span9 offset3 








1-2: 平移 列 


1.5.3 BEI 


要 航 套 列 ， 只 要 在 相应 的 .span* 中 再 增加 一 个 .row， 然 后 在 其 中 包含 
与 父 容器 列 数 相等 的 .span* 即 可 ( 见 图 1-3): 


«div class="row"> 
«div class-"span9"- 
Level 1 of column 
«div class="row"> 
«div class-"span6"»Level 2«/div» 
«div class-"span3"»Level 2«/div» 
</div> 
</div> 
</div> 





Level 1 of column 


Level 2 Level 2 








1-3: REJI 


1.6 流 式 网 格 系统 


流 式 网 格 系统 的 列 宽 定义 使 用 百分比 ， 而 不 是 像素 。 流 式 网 格 系统 与 
国定 网 格 系 统一 样 都 具有 阵 应 能 力 ， 可 适应 不 同 的 屏幕 和 议 备 。 只 
把 某 一 行 的 .row 改 为 .row-futd， 这 一 行 束 会 成 为 流 式 的 。 不 改变 列 
的 类 ， 是 为 了 人 简化 固定 和 流 式 网 格 的 切换 。 想 平移 列 ? 跟 固定 网 格 中 
一 样 ， 在 要 平移 的 列 中 添加 .offset* 类 即 可 : 





«div class-"row-fluid"» 
«div class-"span4"»...«/div» 
«div class-"span8"»...«/div» 
</div> 


<div class="row-fluid"> 

«div class="span4">...</div> 

<div class="span4 offset2">...</div> 
</div> 


流 式 网 格 中 的 舱 僚 有 扣 不 一 样 。 原 因 是 在 使 用 百分比 的 情况 下 ， 每 
个 .row 都 会 把 列 数 重 置 为 12。 举 个 例子 ， 要 想 在 一 个 .span8 FRE 
两 个 等 宽 的 列 ， 不 能 使 用 两 个 .span4 (尽管 两 个 4 平分 8)， 而 应 该 
使 用 两 个 类 为 .span6 的 <div> (ILE 1-4) 。 这 是 为 保证 内 容 具 有 响应 
性 ， 因 为 我 们 希望 内 容 100% HIMA : 


«div class="row-fluid"> 
<div class="span8"> 
«div class="row"> 
«div class="span6">...</div> 
«div class="span6">...</div> 
</div> 
</div> 
</div> 





Level 1 of column 


Level2 Level2 











1-4. REIMAN 


1.7. ”容器 布局 


要 在 页 面 中 实现 固定 宽度 、 居 中 的 布局 ， 只 要 把 内 容 统 统 放 到 <div 
class-"container"»...«/div» 中 即 可 。 如 果 既 想 实 现 流 式 布局 ， 又 想 
把 所 有 内 容 都 封 竣 到 一 个 容 硕 里， 可 以 使 用 «div class="container- 
flutd">...</div>。 流 式 布局 适合 很 多 应 用 、 管 理 界面 及 其 他 项 目 。 
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1.8 了 虽 应 式 设 计 
要 让 Bootstrap 支持 啊 应 式 布 局 ， 必 须 在 «head» 标签 中 添加 一 个 


«meta» 标签 。 另 外 ， 如 果 你 下 载 的 文件 中 设 有 了 啊 应 式 CSS 文件 ， 也 要 
单独 下 载 。 啊 应 式 布 局 必需 的 标签 和 文件 如 下 所 示 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>My amazing Bootstrap site!</title> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 
<link href="/css/bootstrap.css" rel="stylesheet"> 
<link hrefz"/css/bootstrap-responsive.css" rel="stylesheet"> 
</head> 


WRR Bootstrap 724 Wi] REJ, MRA EE b EA, 
不 少 。 目 前 ， 啊 应 能 力 还 不 是 默认 就 有 的 ， 因 为 不 是 所 有 
网 站 都 需要 响应 式 布局 。Bootstrap 的 作者 选择 了 让 开发 人 
员 和 需要 时 添加 ， 而 不 是 不 需要 时 删除 啊 应 功能 


-S 


什么 是 响应 式 设计 
响应 式 设 计 是 针对 浏 览 设 备 优化 页 面 中 既 有 内 容 的 一 种 方法 。 比 如 ， 
在 桌面 麟 览 器 中 既 可 以 看 到 网 站 的 常规 版 本 ， 也 可 以 在 用 户 接 入 更 大 
的 显示 絮 时 看 到 针对 宽屏 的 布局 。 在 平板 电脑 中 看 到 的 是 针对 其 横 屏 
和 坚 屏 模式 优化 之 后 的 布局 。 而 在 手机 上 ， 则 是 能 够 适应 更 罕 宽 度 
的 布局 。 为 了 适用 不 同 的 屏幕 宽度 ，Bootstrap 使 用 CSS 的 媒体 查询 
(media query) 来 检测 浏览 器 视 口 的 宽度 ， 然 后 再 根据 条 件 加 载 和 应 
用 调整 布局 的 样式 表 。 根 据 济 览 右 视 口 的 宽度 ，Bootstrap 可 以 按照 纵 
横 比 或 宽度 的 苑 围 来 优化 布局 ， 但 最 主要 还 是 使 用 min-width 和 max- 
width 属性 。 


Bootstrap 内 部 支持 5 种 不 同 的 布局 ， 都 依赖 于 CSS 媒体 查询 。 最 大 
布局 中 每 一 列 的 宽度 为 70 像素 ， 而 常规 布局 中 每 一 列 宽 度 是 60 像 
素 。 在 适合 平板 电脑 的 布局 中 ， 列 宽 缩 小 为 42 像素 ， 再 第 一 点 ， 每 
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一 列 就 会 流动 起 来 ， 变 成 在 王 直 方向 上 堆 合 ， 并 且 都 与 视 口 同 宽 ( 见 
表 1-1)。 


表 1-1 响应 式 垦 体 得 询 


目标 设备 布局 宽度 列 宽 列 间 距 
大 屏幕 至 少 1200px 70px 30px 
常规 至 少 980px 60px 20px 
平板 竖 屏 至 少 768px 42px 20px 
手机 到 平板 ”至 多 767px ” 流 式 列 ， 宽 度 不 固定 

手机 至 多 480px MAYI, WEP EE 


要 根据 媒体 查询 添加 自 定 义 的 CSS， 可 以 像 下 面 这 样 把 所 有 规则 写 到 
一 个 CSS 文件 中 ， 也 可 以 单 写 一 个 CSS 文件 : 


/* 大 屏幕 */ 
(Qmedia (min-width: 1200px) ( ... } 





/* 平板 竖 屏 到 横 屏 到 常规 屏幕 */ 
(media (min-width: 768px) and (max-width: 979px) { ... } 





/* 手机 横 屏 到 平板 竖 屏 */ 
@media (max-width: 767px) { ... ) 





/* 手机 横 屏 及 更 小 屏幕 */ 

@media (max-width: 480px) ( ... } 
XEFTOKGU eph, RETE E BU UE US E a R TE TE AAI CSS 文件 
中 。 而 在 HTML 的 <Link> 标签 中 ， 可 以 根据 条 件 加 载 它 们 。 这 样 可 
以 保证 加 载 的 文件 相对 小 ， 但 在 啊 应 式 布局 中 会 增加 HTTP 请 示 。 如 
果 你 使 用 LESS 编译 CSS， 可 以 把 它们 都 放 到 一 个 文件 中 : 





«link rel="stylesheet" href="base.css" /> 

«link rel="stylesheet" media="(min-width: 1200px)" hrefz"large.css" /> 

«link rel="stylesheet" media="(min-width: 768px) and (max-width: 979px)" 
href="tablet.css" /> 

<link rel="stylesheet" media="(max-width: 767px)" href="tablet.css" /> 

<link rel="stylesheet" media="(max-width: 480px)" href="phone.css" /> 


辅助 类 
Bootstrap 为 啊 应 式 开 发 提供 了 一 些 辅助 类 ( 见 表 1-2), ， 但 这 些 类 还 是 
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能 不 用 就 不 要 用 。 什 么 情况 下 用 呢 ? 比如 在 某 些 布局 中 显示 或 隐藏 目 
定义 元 素 。 举 个 例子 ， 和 背 规 布局 中 可 以 包含 一 个 页 眉 ， 但 在 移动 布局 
中 需要 向 化 它 ， 只 显示 少量 元 素 。 此 时 ， 可 以 给 页 眉 中 需要 隐藏 的 元 
ANJU .hidden-phone 类 。 


表 1-2 媒体 查询 辅助 类 

类 手机 平板 ”电脑 
.visible-phone 显示 “隐藏 Dy 
.Visible-tablet kajk wR kask 
.visible-desktop kat —— BAG 显示 
.hidden -phone kajk 显 
.hidden-tablet ”显示 隐藏 显示 





EIR NEZ 


.hidden-desktop 显示 显示 KJIN 


啊 应 式 开 发 有 两 种 主要 的 思路 。 当 前 备 受 推 尝 的 方法 是 从 移动 版 本 做 
起 ， 最 后 才 是 桌面 网 站 。Bootstrap 的 思路 刚好 相反 ， 你 可 以 用 它 来 搭 
建 一 个 “差不多 ”的 果 面 网 站 。 


不 过 ， 就 算 你 想 找 的 是 移动 开发 框架 ，Bootstrap 仍然 是 值得 考虑 有 的 。 





eB 2 t5 





Bootstrap 预 定义 的 633 样 式 


Bootstrap 提供 了 一 组 基本 的 具有 预定 义 样式 的 HTML 元 素 ， 用 户 通 
过 类 和 目 定义 样式 很 容 多 增强 这 些 元 素 。 


2.1 排版 


对 页 面 排版 ，Bootstrap 使 用 的 默认 字体 栈 为 "HeLvettca Neue", 
HeLvetica，AriaL，sans-serif;。 这 些 字 体 也 是 主流 操作 系统 默认 文 
持 的 标准 字体 。 万 一 明确 指定 的 字体 都 不 存在 ， 那 么 负责 兜 底 儿 的 
sans-serif 会 告诉 浏览 砌 使 用 默认 的 字体 。 页 面 正 文 的 font-size 是 
14 像素 ，Line-hetight 是 20 R£., MARIJ margin-bottom 是 10 像 
me uw line-height 的 一 半 。 


2.1.1 标题 
Bootstrap 为 所 有 6 个 级 别 的 标题 都 定义 了 样式 〈 见 图 2-1)， 其 中 
<hl1> 是 36 像 素 高 ， <h6> 是 12 像 素 高 (前 面 说 过 ， IE X Æ 14 ff 
过 高 )。 此 外 ， 如 果 想 给 这 些 标题 添加 行内 级 的 子 标题 ， 可 以 使 用 
<small> 标签 ， 结 果 文 本 会 稍 小 一 些 ， 颜 色 会 稍 浅 一 些 。 拿 <hl 来 说 ， 
它 的 子 标题 的 文本 是 24 像素 高 ， 不 加 粗 ， 而 且 是 灰色 : 
h1 small { 
font-size:24px; 
font-weight:normal; 


line-height:1; 
Color :#999; 





Heading 1 
Heading 2 


Heading 3 


Heading 4 
Heading 5 


Heading 6 











2-1: 标题 





2.1.2 ”强调 段落 

要 想 强 调 某 个 段落 的 文本 ， 可 以 为 它 加 上 class="lead”( 见 图 2-2)。 
这 会 导致 段落 文本 稍稍 变 大 、 变 细 ， 行 高 也 变 高 。 这 种 样式 一 般 用 于 
文章 的 前 儿 段 ， 但 用 在 其 他 位 置 也 未 尝 不 可 : 








«p class="lead">Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter 
swine boudin meatloaf shoulder short ribs cow drumstick beef jowl. 
Meatball chicken sausage tail, kielbasa strip steak turducken venison prosciutto. 
Chuck filet mignon tri-tip ribeye, flank brisket leberkas. Swine turducken 
turkey shank, hamburger beef ribs bresaola pastrami venison rump.«/p» 





Lead Example 


Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter swine boudin meatloaf 
shoulder short ribs cow drumstick beef jowl. Meatball chicken sausage tail, kielbasa 
strip steak turducken venison prosciutto. Chuck filet mignon tri-tip ribeye, flank 
brisket leberkas. Swine turducken turkey shank, hamburger beef ribs bresaola 
pastrami venison rump. 











2-2: 强调 正文 用 .lead 类 


2.1.3 强调 内 容 

前 面 讨 论 过 可 以 在 标题 中 使 用 <small> 标签 ， 在 正文 中 也 可 以 使 用 
该 标签 。 为 正文 中 的 文本 添加 这 个 标签 后 ， 文 本 会 缩小 到 原来 大 小 
的 8596, 


2.1.4 粗 体 


要 强调 具体 的 文本 ， 可 以 使 用 «strong» 标签， 这 样 就 会 给 相应 文本 应 
用 font-weight:bold;. 


2.1.5 HE 
要 生成 斜体 ， 使 用 <em> 标签 。 这 个 标签 的 意思 也 是 在 文本 中 强调 某 些 
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2. 


有 读者 可 能 不 解 ， 为 什么 不 使 用 «b» 或 <i>， 而 非 要 用 <strong> 
和 «em» WE? Æ HTMLS 中 ，<b> 的 语义 是 仅仅 突出 显示 基 
些 词 或 短语 ， 但 不 代表 它们 更 重要 ， 比 如 一 些 关 键 词 或 人 
名 。 而 <i> 主要 用 于 表示 不 同 的 语言 、 技 术 术 语 、 内 部 对 话 
等 。 要 了 解 -b> 和 <i> 的 语义 变化 ， 请 参考 W3.org 的 文章 


(http://www.w3.org/International/questions/qa-b-and-i-tags ) 。 





1.6 强调 相关 的 类 





除了 «strong» 和 «em», Bootstrap 还 提供 了 一 些 表 示 强 调 的 类 ( 见 图 
2-3)。 这 些 类 可 以 应 用 给 «p» 或 «spans: 


«p class-"muted"»This content is muted</p> 

«p class-"text-warning"»This content carries a warning class«/p» 

«p class-"text-error"»This content carries an error class«/p» 

«p class-"text-info"»This content carries an info class«/p» 

«p class-"text-success"»This content carries a success class</p> 

<p>This content has «em»emphasis«/em», and can be «strong»bold«/strong»«/p» 








Bootstrap Emphasis Classes 


[his content is muted 

This content carries a warning class 
This content carries an error class 
This content carries an info class 
This content carries a success class 


This content has emphasis, and can be bold 





2-3: 强调 相关 的 类 








1. 缩写 词 

HTML 的 «abbr» 元 素 用 于 标记 缩写 词 或 首 字 母 缩写 ， 如 WWW, 
HTTP ( 见 图 2-4) 。 标 记 了 缩写 词 之 后 ， 六 览 右 、 拼 写 检查 右 、 翻 译 
系统 或 搜索 引擎 都 能 据 以 得 知 文本 的 性 质 。Bootstrap 会 在 «abbr» 元 
素 下 方 添加 一 条 浅 色 的 虚线 ， 并 在 光标 悬 停 时 显示 完整 文本 的 内 容 
(当然 ， 前 提 是 你 在 «abbr» 的 title 属性 里 添加 了 完整 的 内 容 ) 











«abbr title-"Real Simple Syndication">RSS</abbr> 





Real Simple Syndication 











图 2-4: 缩写 词 
为 «abbr» 添加 .initialism 类 可 以 得 到 稍 小 一 些 的 文本 ( 见 图 2-5): 


That joke had me «abbr title-"rolling on the floor, Laughing out loud"» ROTFLOL 
</abbr> 





That joke had me ROTFLOL. 


rolling on the floor, laughing out loud 








图 2-5. 稍 小 一 些 的 缩写 


2. 地址 

在 页 面 中 使 用 «address» 元素 可 以 让 屏幕 阅读 各 和 搜索 引擎 找到 
地 址 或 电话 号 码 ( 见 图 2-6)。 这 个 标签 也 可 以 标记 电子 邮件 地 址 。 
«address» 默认 是 display:block;， 因 此 必要 时 可 以 用 <br> 标签 来 换 
fr (例如 把 城市 与 街道 分 开 ): 





<address> 
<strong>0'Reilly Media, Inc.</strong><br> 
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1005 Gravenstein HWY North<br> 

Sebastopol, CA 95472«br» 

«abbr title-"Phone"2P:«/abbr» 

«a hrefz"tel:417078277000"2(707) 827-7000«/a» 
«/ address» 


«address» 

«strong»Jake Spurlock«/strong»«br» 

«a hrefz"mailto:£Z"»flastQoreilly.com«/a» 
«/ address» 





O'Reilly Media, Inc. 

1005 Gravenstein HWY North 
Sebastopol, CA 95472 

P: (707) 827-7000 

Jake Spurlock 
flastGoreilly.com 











2-6: 标记 地 址 


3. 引用 


要 在 页 面 中 标记 引用 或 名 人 名 言 的 文本 块 ， 使 用 «blockquote» 标签 。 
为 了 保证 效果 ， 必 要 时 可 以 添加 «br» 换行 ， 用 <p> 分 段 。Bootstrap 
默认 会 缩 进 引用 的 文本 ， 并 在 左 侧 加 一 条 粗 边 框 。 标 记 引 用 来 产 可 以 
用 «small» 标签 ， 人 名 可 以 用 «cites 标签 : 


<blockquote> 
<p>That this is needed, desperately needed, is indicated by the 
incredible uptake of Bootstrap. I use it in all the server software 
I'm working on. And it shows through in the templating language I'm 
developing, so everyone who uses it will find it's "just there" and 
works, any time you want to do a Bootstrap technique. Nothing to do, 
no libraries to include. It's as if it were part of the hardware. 
Same approach that Apple took with the Mac OS in 1984.«/p» 
«small2Developer of RSS, «cite title-"Source Title"2Dave Winer«/cite-» 
«/small» 
«[blockquote- 





图 2-7 展示 了 用 到 所 有 这 些 标签 的 例子 : 





That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. | use it in all the 
server software l'm working on. And it shows through in the templating language l'm developing, so everyone 
who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, 
no libraries to include. It's as if it were part of the hardware. Same approach that Apple took with the Mac OS 


in 1984. 
— Developer of RSS, Dave Winer 








2-7; 基本 的 引用 


Rj 


要 想 让 引用 右 对 齐 ， 可 以 给 «blockquote» 添加 .puLL-right 
类 。 添 加 这 个 类 后 ， 不 光 是 文本 会 右 对 齐 ， 整 个 引 用 块 都 
会 浮动 到 右边 。 这 样 就 能 得 到 很 漂亮 的 突出 引用 效果 ， 如 
图 2-8 所 示 。 











Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do This is just amazing. 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


How cool is this? 











2-8: 突出 引用 


2.1.7 列表 


Bootstrap 支持 HTML 提供 的 三 种 列表 : 有 序列 表 、 无 序列 表 和 定义 
列表 。 无 序列 表 项 没有 特定 顺序 ， 一 般 样 式 是 添加 圆 点 符号 。 


序列 表 


如 采 想 去 掉 无 序列 表 前 面 的 圆 点 ， 可 以 在 相应 的 «uto 标签 中 添加 
class-"unstyled" ( 见 图 2-9). 


<h3>Favorite Outdoor Activities</h3> 
<UL> 
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«li»Backpacking in Yosemite«c/li» 
«li»Hiking in Arches 
«ul» 
«li»Delicate Arch«/li» 
«li»Park Avenue</LiL> 
</ul> 
</li> 
<li>Biking the Flintstones Trail</li> 
</ul> 





Favorite Outdoor Activites 


e Backpacking in Yosemite 
e Hiking in Arches 

o Delicate Arch 

o Park Avenue 
e Biking the Flintstones Trail 











2-9: 无 序列 表 


X 我 个 人 非常 讨厌 使 用 <br> 标签 。 因 此 ， 遇 到 需要 换行 的 情 
况 ， 我 都 是 使 用 没有 样式 的 无 序列 表 代替 。 比 如 ， - 2-6 
“所 示 的 地 址 块 ， 如 果 你 想 让 行 与 行 之 间 靠 得 更 近 些 ， 可 以 

把 每 一 行 都 放 到 一 个 eli 标签 中 。 我 觉得 这 样 — 


传达 文本 的 语义 。 











.有 序列 表 
有 序列 表 项 是 有 茶 种 次 序 关 系 的 ， 因 此 样式 上 使 用 数字 而 不 是 圆 点 
( 见 图 2-10)。 有 序列 表 适 合 任务 清单 、 操 作 步 又 ， 其 至 博客 的 评论 
列表 : 


<h3>Self-Referential Task List</h3> 











<ol> 
<li>Turn off the internet.«/li» 
«li»Write the book.«/li» 
«li»... Profit?«/li» 
</ol> 
18 | 第 2 章 





Self-Referential Task List 


1. Turn off the internet. 
2. Right the book 
3. ... Profit? 











2-10: 有 序列 表 


3. 定义 列表 

第 三 种 列表 是 定义 列表 。 定 义 列表 与 无 序列 表 和 有 序列 表 的 区 别 在 
于 ， 它 没有 块 级 的 <li> 元 素 ， 而 是 每 个 列表 项 都 由 «dt» 和 «dd» IA 
共同 组 成 。<dt> 代表 “definition term” ( 词 条 ) ， 类 似 词典 里 收录 的 词 
语 〈 或 短语 ) «dd» 自然 就 是 <dt> 的 定义 。 


我 们 经 第 看 到 有 人 在 无 序列 表 中 加 标题 ,虽然 也 可 以 ,但 从 语义 上 
讲 这 不 是 标记 文本 的 最 佳 方式 。 更 好 的 方法 就 古 使 用 <dl>， 然 后 把 
原来 应 用 给 标题 和 文本 的 样式 应 用 给 «dt» 和 «dd» 元 素 (JLE 2-11). 
Bootstrap 为 词 条 和 解释 定义 了 清晰 的 样式 ， 不 仅 可 以 像 这 样 分 行 显 
示 ， 还 可 以 并 排 显 示 : 





<h3>Common Electronics Parts</h3> 
<dl> 
<dt>LED</dt> 
<dd>A light-emitting diode (LED) is a semiconductor Light source.</dd> 
<dt>Servo</dt> 
<dd>Servos are small, cheap, mass-produced actuators used for radio 
control and small robotics.</dd> 
</dl> 





Common Electronics Parts 


LED 
A light-emitting diode (LED) is a semiconductor light source. 
Servo 
Servos are small, cheap, mass-produced actuators used for radio control and small robotics. 








2-11: 定义 列表 
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要 让 词 条 和 解释 并 排 显 示 ， 只 要 给 <dl> 标签 加 上 class="dl-horizontal" 
BNaf 〈 见 图 2-12), 





Common Electronics Parts 


LED  Alight-emitting diode (LED) is a semiconductor light source. 
Servo Servos are small, cheap, mass-produced actuators used for radio control and small robotics. 








2-12: 水 平 布局 的 定义 列表 





被 text-overflow 属性 截 短 。 此 外 ， 在 视 口 较 罕 的 时 候 ， 词 


定义 列表 在 水 平 布 局 时 ， 词 条 如 果 过 长 而 左边 放 不 下 ， 将 
:条 和 解释 将 自动 变 成 默认 垂直 堆 簿 布局 。 


2.2 代码 


在 Bootstrap 中 有 两 种 方式 显示 代码 ， 一 种 是 使 用 «code» 标签 ， 另 一 
种 是 使 用 <pre 标签 。 一 般 来 说 , 行内 代码 使 用 前 者 ， 代 码 段 使 用 
后 者 : 


<p>Instead of always using divs, in HTML5, you can use new elements like 
«code»&lt;section&gt;«/code», «code»&lt;header&gt;«/code», and 
«code»&lt;footer&gt;«/code». The html should look something like this:«/p» 
«pre» 

&lt;article&gt; 

&lt;hi&gt;Article Heading&lt;/hi1&gt; 

&lt;/article&gt; 

</pre> 


| 使 用 «pre» 和 «code» 标签 标记 代码 时 ， 一 定 要 把 代码 中 的 
Ad s MUR Idm ERE &lt; 和 &gt;。 


2.3 表格 


Bootstrap X Ze f& BJ 4b P de dX we i SUD HJ. KTA m deta IRS t 
IH], rf] Bootstrap 让 我 们 轻易 就 能 做 出 请 更 漂亮 的 表格 。 表 2-1 列 出 了 








Bootstrap 3c FEÉJZé fA 7L 38. 
表 2-1 Bootstrap 支 持 的 表格 元 素 


标 签 
<table> 
<thead> 
<tbody> 
<tr> 
<td> 
<th> 


<caption> 


Ho UAE 

包装 元 素 ， 用 于 显示 表 列 式 数 据 

表 头 行 (<tr>) 的 容器 

表格 行 (<tr>) 的 容器 

单元 格 (<td> 或 <th>) 容器 

普通 单元 格 

一 行 或 一 列 《取决 于 作用 范围 和 位 置 ) 中 作为 表 头 的 单元 格 
用 于 包装 表格 的 说 明 或 小 结 ， 对 屏幕 阅读 积 特 别 有 用 





如 果 你 想 要 一 个 简单 的 表格 ， 内 容 间 有 少许 内 边 距 ， 同 时 还 有 水 平 的 
分 隔 线 ， 只 要 给 <table> 添加 .table 类 即 可 ( 见 图 2-13)。 这 种 基本 
布局 给 每 个 -td> 上 方 添加 了 边框 : 


«table class="table"> 
<caption>...</caption> 


<thead> 
<tr> 


<th>.. 
<th>.. 


</tr> 
</thead> 
<tbody> 

<tr> 


<td>.. 
<td>.. 


</tr> 
</tbody> 
</table> 


.</th> 
.</th> 


.</td> 
.</td> 





Name 
Kyle West 
Davey Preston 


Taylor Lemmon 


Phone Number Rank 
707-827-7001 Eagle 
707-827-7003 Eagle 


707-827-7005 Eagle 








2-13: 基本 的 


.table 类 
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2.3.1 可 选 的 表格 类 

除了 基本 的 表格 标记 和 .table X, Bootstrap 还 提供 了 4 个 类 为 表格 添加 
不 同 的 样式 ， 它 们 是 : .table-striped, .table-bordered, .table-hover 
和 .tabLe-condensed。 








1. 带 条 纹 背 景 的 表格 

添加 .table-striped 类 ， 就 可 以 为 ztbody> 中 的 表格 行 加 上 条 纹 背 
景 ( 见 图 2-14)。 这 是 通过 :nth-chtLd 选 择 符 实现 的 ， 但 Internet 
Explorer 7 和 8 不 支持 这 个 选择 符 。 





Name Phone Number Rank 
Kyle West 707-827-7001 Eagle 
Davey Preston 707-827-7003 Eagle 
Taylor Lemmon 707-827-7005 Eagle 











2-14; TRRZCEIERUS CIS 


2. 市 边框 的 表格 
添加 .table-bordered 类 ， 可 以 为 所 有 单元 格 加 上 边框 ， 为 整个 表格 
加 上 圆 角 ， 如 图 2-15 所 示 。 





Name Phone Number Rank 
Kyle West 707-827-7001 Eagle 
Davey Preston 707-827-7003 Eagle 
Taylor Lemmon 707-827-7005 Eagle 








图 2-15: 市 边框 的 表格 


3. 市 悬 停 高 亮 的 表格 
2-16 展示 了 添加 .table-hover 类 的 效果 ， 此 时 光标 悬 停 的 行 会 囊 有 浅 灰 色 








Name Phone Number Rank 


Kyle West 707-827-7001 Eagle 
Davey Preston 707-827-7003 Eagle 
Taylor Lemmon 707-827-7005 Eagle 











图 2-16: 带 悬 停 高 亮 的 表格 


4. 紧缩 的 表格 
ids Jl .table-condensed 类 ， 如 图 2-17 ga 就 会 减少 一 半 的 内 边 距 
以 紧缩 表格 。 这 种 样式 适合 信息 密集 的 情 ; 





Name Phone Number Rank 
Kyle West 707-827-7001 Eagle 
Davey Preston 707-827-7003 Eagle 
Taylor Lemmon 707-827-7005 Eagle 











图 2-17: 紧缩 的 表格 


2.3.2 ”表格 行 的 类 
K 2-2 列 出 了 可 以 添加 给 表格 行 的 类 ， 用 于 改变 特定 行 的 颜色 (UL 
图 2-18), 


表 2-2 ”表格 行 可 选 的 类 





ps 说 明 育 景 颜色 
. SUCCESS 表示 成 功 或 积极 的 情形 绿 
.error 表示 人 危险 或 消极 的 情形 红 
.Warning 表示 警告 黄 
.info 用 于 代替 默认 样式 i 

# Product Payment Taken Status 

1 TB - Monthly 01/04/2012 Approved 

2 TB - Monthly 02/04/2012 Declined 

3 TB - Monthly 03/04/2012 Pending 

4 TB - Monthly 04/04/2012 Call in to confirm 








2-18: 可 应 用 于 表格 行 的 类 
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2.4 RẸ 


表单 也 是 Bootstrap 的 重头 戏 ， 让 开发 人 员 得 到 了 解放 。 作 为 Web F 
发 人 员 ， 我 最 不 喜欢 设计 表单 样式 了 。 而 使 用 Bootstrap ， 只 要 一 些 人 向 
单 的 HTML 标记 和 一 些 类 ， 就 能 做 出 不 同 风格 的 表单 。 


Bootstrap 自 带 了 基本 的 表单 样式 ， 不 需要 添加 任何 辅助 类 ( 见 图 2-19)。 
如 果 你 使 用 占 位 符 ， 请 注意 只 有 新 版 本 浏览 器 才 支持 。 旧 版 本 浏览 器 


VA T: 








«form» 
«fieldset» 
«legend»Legend«/legend» 
«label for-2"name"»Label name</label> 
«input type="text" id-z"name" 
placeholder-"Type something..."» 
«span class-"help-block"»Example block-level help 
text here.«/span» 
«label class-"checkbox" forz"checkbox'» 
«input type="checkbox" id="checkbox"> 
Check me out 
</label> 
<button type="submit" class="btn">Submit</button> 
</fieLdset> 
</form> 
Legend 
Label name 


Type something... 
Example block-level help text here. 


(J Check me out 


Submit 











图 2-19; 基本 的 表单 





2.4.1 可 选 的 表单 布局 
通过 一 些 辅助 类 ， 可 以 动态 更 新 表单 的 布局 。Bootstrap 为 第 用 的 表单 
布局 预定 义 了 样式 。 


1. 搜索 表单 

为 «form» 标签 添加 .form-search 类 ， 再 给 «input» 添加 .search-query 
类 ， 然 后 束 可 以 创建 一 个 圆 角 输入 框 加 一 个 行内 提交 按钮 的 搜索 表单 
( 见 图 2-20): 


<form class="form-search"> 
«input type="text" class-"input-medium search-query"> 
«button type="submit" class="btn">Search</button> 
</form> 





Search 











图 2-20: 搜索 表单 


2. 行内 表单 

要 让 所 有 表单 元 素 都 出 现在 一 行 ， 而 且 标 签 也 都 显示 在 劳 边 ， 给 
«form» 标签 添加 .form-inline 类 ( 见 图 2-21)。 下 面 的 示例 代码 说 明 
了 如 何 创 建行 内 表单 : 





«form class-"form-inline"» 
«input type="text" class-"input-small" placeholder-"Email"2 
«input type="password" class-"input-small" placeholder-'Password"» 
«label class="checkbox"> 
«input type-"checkbox"» Remember me 
«/label» 
«button type="submit" class-"btn"»Sign in«/button» 
</form> 





Email Password J Remember me Sign in 





图 2-21: 行内 表单 
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3. HORY 

Bootstrap 还 支持 预定 义 的 横 问 表单 ， 这 种 表单 涉及 的 标记 多 ， 外 观 
也 独树一帜 。 以 前 ， 人 们 大 都 使 用 表格 来 布局 图 2-22 所 示 的 这 种 表 
单 ，Bootstrap 抛 开 表格 实现 了 这 种 布局 。 而 且 ， 如 有 果 你 使 用 了 响应 式 
CSS， 横 向 表单 还 能 自动 适应 较 小 的 屏幕 ， 把 所 有 控件 堆 共 起 来 。 


要 创建 横 加 布局 的 表单 ， 请 遵循 如 下 步骤 : 


。 为 «form» 元 素 添 加 . form-horizontal 25; 

把 成 对 的 标签 和 控件 包装 在 类 为 .control-group 的 «div» HP; 

。 为 其 中 每 个 标签 添加 .controL-Labet 2E; 

把 其 中 每 个 控件 包装 在 一 个 类 为 .controls 的 «div» 中 ， 以 便 对 齐 。 





Email Email 


Password Password 


.)] Remember me 


Sign in 











2-22: 模 向 表单 


<form class="form-horizontal"> 
«div class-"control-group"» 
«label class-"control-label" forz"inputEmail"»Email«/label- 
«div class-"controls"» 
«input type="text" id-"inputEmail" placeholder-z"Email"» 
</div> 
</div> 
<div class="control-group"> 
«label class-"control-label" for="inputPassword">Password</label> 
«div class-"controls"» 
«input type="password" id-"inputPassword" placeholder-"Password'» 
</div> 
</div> 
<div class="control-group"> 
<div class="controls"> 
<label class="checkbox"> 
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«input type-"checkbox"» Remember me 
</label> 
<button type="submit" class="btn">Sign in</button> 
</div> 
</div> 
</form> 


2.4.2 ”内 置 支持 的 表单 控件 


Bootstrap 原生 支持 各 种 最 常用 的 表单 控件 ， 主 要 包括 输入 框 、 文 本 
区 、 复 选 征 、 单 选 按 镭 和 选项 列表 。 


1. 输入 框 

最 常用 的 文本 字段 就 是 输入 框 ， 用 户 要 通过 它们 输入 大 多 数 表单 数据 
( 见 图 2-23), Bootstrap 支持 HTMLS 规范 定义 的 所 有 原生 输入 类 型 . 
text, password, datetime, datetime-local, date, month, time, 


week, number, email, url, search, tel FN color, FEAN: 


«input type="text" placeholder-"Text input"> 





Text input 











2-23. 输入 框 


3 








输入 框 和 文本 区 在 active DER EE e. 
2. 文本 区 


文本 区 用 于 输入 多 行文 本 ( 见 图 2-24)。 使 用 文本 区 时 ， 最 经 稼 做 的 
就 是 修改 其 rows， 控 制 预 留 行 数 ( 行 数 少 ， 占 地 方 小 ; 行 数 多 ， 占 地 
AK): 


«textarea rows-z"3"»«/textarea» 
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^ "A 





图 2-24; 默认 状态 和 :active 状态 的 文本 区 


3. 复 选 框 和 单 选 按钮 
复 选 框 和 单 选 按钮 非常 适合 让 用 户 在 一 组 预定 项 中 选择 ( 见 图 2-25 ) 。 


——— 使 用 <checkbox>， 如 果 想 让 用 户 只 选择 
使 用 <radio>: 


«label class="checkbox"> 
«input type-"checkbox" value= 
Option one is this and ee sure to include why it's great. 
</label> 


<label class="radio"> 
<input type="radio" name-"optionsRadios" id="optionsRadios1" value= 
"option1" checked> 
Option one is this and that-be sure to include why it's great. 
«/label» 
«label class-"radio"» 
«input type="radio" name-"optionsRadios" id-"optionsRadios2" value= 
"option2"» 
Option two can be something else, and selecting it will deselect option one 
</label> 





J Option one is this and that— be sure to include why it's great 


J) Option one is this and that— be sure to include why it's great 


@) Option two can be something else and selecting it will deselect option one 











图 2-25: 复 选 框 和 单 选 按钮 


如 果 想 让 多 个 复 选 框 或 单 选 按钮 出 现在 一 行 ， 那么 就 给 它们 汪 
加 .intline 类 ( 见 图 2-26): 











«label for="option1" class="checkbox inline"» 

«input id-"option1" type="checkbox" id-"inlineCheckbox1" value-"optioni"» 1 
</label> 
<label for="option2" class="checkbox inline"> 

«input id-"option2" type="checkbox" id="inlineCheckbox2" value-"option2"» 2 
</label> 
<label for="option3" class="checkbox inline"> 

«input id-"option3" type="checkbox" id="inlineCheckbox3" value="option3"> 3 
</label> 











图 2-26: 行内 复 选 杠 


4. 选项 列表 

选项 列表 适合 让 用 户 选 择 多 项 ， 但 默认 只 人 允许 选择 一 项 ( 见 图 2-27) 。 
建议 只 在 用 户 对 选项 很 熟悉 的 情况 下 使 用 <select>， 如 州 名 或 数值 。 
要 让 用 户 选 择 多 项 ， 使 用 multiple="multiple": 


«select» 
«option»1«/option» 
«option»2«/option» 
«option»3«/option» 
«option»4«/option» 
«option»5«/option» 

</select> 


<select multiple="multiple"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 











图 2-27: 选项 列表 
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2.4.3 扩展 的 表单 控件 
除了 上 一 节 介 绍 的 基本 表单 控件 ，Bootstrap 还 提供 了 另外 几 个 控件 ， 
作为 对 HTML 表单 元 素 的 补充 。 比 如 ， 输 入 框 的 前 置 和 后 置 组件 。 





输入 框 的 前 置 和 后 置 组 件 

利用 输入 框 的 前 置 和 后 置 组 件 ， 可 以 添加 用 户 输 入 中 的 公共 部 分 ( 见 
图 2-28)。 例 如 ， 可 以 为 输入 框 前 置 美元 符号 、Twitter 用 户 名 的 @ 
符号 ， 或 应 用 界面 中 其 他 公共 的 部 分 。 要 在 输入 框 前 面 或 后 面 添加 内 
容 ， 首 先 写 一 个 类 为 .input-prepend 或 .input-append 的 <div>。 然 后 
就 在 这 个 «div» 中 ， 把 要 前 置 或 后 置 的 内 容 放 到 一 个 类 为 .add-on 的 
«span» 中 ， 再 把 这 个 «span» 放 到 相应 的 «input» 元 素 前 面 或 后 面 : 





«div class="input-prepend"> 
«span class="add-on">@</span> 
«input class-"span2" id-"prependedInput" type="text" 
placeholderz"Username"» 
</div> 
<div class="input-append"> 
«input class-"span2" id="appendedInput" type="text"> 
<span class="add-on">.00</span> 
</div> 














2-28: 前 置 和 后 置 内 容 


如 果 既 想 前 置 内 容 又 想 后 置 内 容 ， Abs (E ^c <div> 中 同时 添加 .input- 
prepend 和 .input-append 类 ( 见 图 2-29); 





«div class-"input-prepend input-append"» 
«span class-"add-on'»$«/span» 
«input class-"span2" id-"appendedPrependedInput" type="text"> 
«span class-"add-on'».00«/span» 

</div> 








$ .00 











2-29: 同时 前 置 和 后 置 内 容 


此 外 ， 还 可 以 使 用 带 .btn 类 的 «button» 代替 <span>， 在 输入 框 前 面 
和 /或 后 面 添加 按钮 ( 见 图 2-30): 


«div class-"input-append'» 
«input class-"span2" id-"appendedInputButtons" type="text"> 
«button class="btn" type-"button"»Search«/button» 
«button class="btn" type-"button"»Options«/button» 

</div> 





Search Options 











图 2-30: 在 输入 框 后 面 添加 多 个 按钮 


要 是 给 搜索 表单 后 置 这 么 一 个 按钮 ， 那 么 按钮 也 会 像 文本 框 一 样 带 有 
EK (ILAI 2-31): 


«form class-"form-search"» 
«div class-"input-append"» 
«input type="text" class-"span2 search-query"» 
«button type="submit" class-'"btn"»Search«/button» 
</div> 
<div class="input-prepend"> 
<button type="submit" class="btn">Search</button> 
<input type="text" class="span2 search-query"> 
</div> 
</form> 





Search Search 











图 2-31: 为 搜索 表单 添加 按钮 


2.4.4 设置 控件 大 小 
在 继承 Bootstrap 默认 网 格 系 统 的 基础 上 ， 可 以 使 用 .spanx 来 设置 
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控件 大 小 。 除 了 这 种 方式 ， 还 可 以 使 用 一 些 类 来 相对 地 控制 控件 大 
小 。 如 果 想 让 输入 框 像 块 级 元 素 一 样 占 满 容 融 ， 可 以 为 它 添加 .input- 
block-level 类 ， 如 图 2-32 所 示 : 


«input class-"input-block-level" type="text" placeholder=".input-block-level"> 





| nput-block-level | 











图 2-32: 块 级 输入 框 


1. 设置 输入 控件 的 相对 大 小 
如 前 所 述 ， 设 置 控 件 大 小 时 除了 使 用 .span*， 还 可 以 使 用 一 些 类 名 
( 见 图 2-33): 


«input class-"input-mini" type="text" placeholder=".input-mini"> 
«input class-"input-small" type="text" placeholder=".input-small"> 
«input class-"input-medium" type="text" placeholder=".input-medium"> 
«input class-"input-large" type="text" placeholder=".input-large"> 
«input class-"input-xlarge" type="text" placeholder=".input-xlarge"> 
«input class-"input-xxlarge" type="text" placeholder=".input-xxlarge"> 





input-mir 


input-small 


input-medium 


input-large 


input-xlarge 


input-xxlarge 





图 2-383; 相对 大 小 的 输入 控件 





在 Bootstrap 将 来 的 版 本 中 ， 这 些 类 的 样式 还 会 加 以 修正 ， 以 
匹配 按钮 大 小 。 比 如 ，.input-large 会 同时 增 大 输入 框 的 
内 边 距 和 文本 大 小 。 











2. 基于 网 格 设置 控件 大 小 
还 可 以 使 用 .spani 到 .span12 来 基于 网 格 设置 控件 大 小 ( 见 图 2-34): 


«input class="span1" type="text" placeholder-".spani"» 
«input class-"span2" type="text" placeholder-".span2"» 
«input class-"span3" type="text" placeholder-".span3"» 
«select class-"spani"» 

</select> 

<select class="span2"> 

</select> 

<select class="span3"> 


</select> 





pan1 
.Span2 
.span3 
0 05$ 
l s 
| Y 











图 2-34: 跨 列 的 输入 控件 

如 果 想 让 多 个 输入 控件 位 列 同 一 行 ， 可 以 添加 .controls-row 类 ， 以 
产生 适当 间距 ( 见 图 2-35)。 这 样 Bootstrap 就 会 浮动 控件 ， 设置 间 
IE, FRI .row 类 一 样 清除 浮动 : 





«div class="controls"> 
«input class-"span5" type="text" placeholder=".span5"> 
</div> 
«div class-"controls controls-row"> 
«input class-"span4" type="text" placeholder-".span4"» 
«input class-"spani" type="text" placeholder-".spani"» 
</div> 
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.span5 
.span4 .span1 
.span3 .Span2 


.span2 .span3 


.Span1 .span4 











2-35; 一 行 控件 


3. 不 可 编辑 的 文本 
如 果 想 展示 一 个 不 让 用 户 编 辑 的 表单 控件 ， 只 要 添加 .uneditable- 
input 类 即 可 ( 见 图 2-36 ) : 


«span class-"input-xlarge uneditable-input">Some value here</span> 





Some value here 








2-96: 不 可 编辑 的 输入 控件 


4. 表单 动作 
如 果 在 .form-horizontal 最 后 放 上 几 个 .form-actions (也 就 是 按钮 )， 
那么 这 些 按 钮 会 自动 与 表单 控件 对 齐 ( 见 图 2-37): 
<div class="form-actions"> 
«button type="submit" class="btn btn-primary">Save changes</button> 


<button type="button" class="btn">Cancel</button> 
</div> 





Save changes Cancel 











图 2-37: 表单 控件 





5. 帮助 文本 
Bootstrap 中 的 表单 控件 可 以 带 有 块 级 或 行内 文本 作为 帮助 ( 见 图 2-38): 





«input type="text"><span class="help-inline">Inline help text</span> 





Inline help text 











2-38: 行内 帮助 
要 添加 块 级 帮助 ， 为 «input» 后 面 的 标签 添加 .help-block 类 〈 见 图 2-39): 


«input type="text"><span class="help-block">A longer block of help text 
that breaks onto a new line and may extend beyond one line.«/span» 





A longer block of help text that breaks onto a new line and may extend beyond one line. 











2-39; 块 级 帮助 


2.4.5 “表单 控件 的 状态 
除了 :focus 状态 的 样式 外 ，Bootstrap 还 为 被 禁用 的 输入 控件 提供 了 
样式 ， 为 表单 验证 提供 了 一 些 类 。 


1. 输入 控件 获得 焦点 

输入 控件 获得 焦点 时 〈 比 如 用 户 单 击 了 输入 框 或 按 Tab 键 切换 到 输入 
框 )， 输 入 框 默 认 的 外 轮廓 样式 消失 ， 代 之 以 box-shadow 样式 。 我 还 
记得 第 一 次 在 Twitter 上 看 到 这 个 效果 时 的 情景 ， 我 想 不 出 来 是 怎么 
实现 的 ， 禁 不 住 去 查看 了 它 的 源 代 码 。 在 WebKit 中 ， 这 个 效果 可 以 
这 样 实现 : 
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input { 
-Wwebkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
-webkit-transition: box-shadow linear 0.2s; 


} 


input:focus { 


-webkit-box-shadow: inset © 1px 1px rgba(0, 0, 0, 0.075), © 0 8px 


rgba(82, 168, 236, 0.6); 
} 


这 里 给 «input» 添加 了 少量 内 阴影 LEA WE AE RP DU] ( 见 
图 2-40). 而 在 :focus 状态 下 ， 则 会 应 用 8 像素 的 浅 蓝 色 边 框 。 


webkit-transition ERAI Uu zs LA 0.2 秒 的 时 间 勺 速 完 成 动画 : 


«input class-"input-xlarge" id-"focusedInput" type="text" 
value-"This is focused..."» 





This is focused... 











图 2-40: 获得 焦点 的 输入 框 
精细 微妙 ， 多 好 的 效果 啊 | 


2. 禁用 状态 的 输入 框 


要 禁用 某 个 输入 框 ， 只 要 给 <input> 加 上 disabled 属性 即 可 ， 


会 改变 悬 停 光标 的 样式 ( 见 图 2-41) : 


«input class-"input-xlarge" id-"disabledInput" type="text" 
placeholder2"Disabled input here..." disabled» 


这 样 也 





Disabled input here... 








2-41: 蔡 用 状态 的 输入 框 


3. 验证 状态 


Bootstrap 提供 的 验证 样式 包括 error. (FIR), warning (警告 





(信息 ) 和 success (成 功 )， 如 图 242 所 示 。 要 应 用 这 些 样式 ， FH 
把 相应 的 类 添加 给 .control-group ICAEN HJ : 


«div class-"control-group warning"> 
«label class-"control-label" forz"inputWarning"»Input with warning«/label» 
«div class-"controls"» 
«input type="text" id-"inputWarning'» 
«span class-"help-inline"»Something may have gone wrong</span> 
</div> 
</div> 
«div class="control-group error"> 
<label class="control-label" for="inputError">Input with error</label> 
<div class="controls"> 
<input type="text" id="inputError"> 
<span class="help-inline">Please correct the error</span> 
</div> 
</div> 
«div class-"control-group success"> 
«label class-"control-label" for-"inputSuccess"»Input with success«/label- 
«div class-"controls"» 
«input type="text" id-"inputSuccess"» 
«span class-"help-inline"-2Woohoo!«/span» 
</div> 
</div> 





Input with warning BEEN Something may have gone wrong 
Input with error [| Please correct the error 
Input with info [| Username is taken 
Input with Success [| Woohool 











2-42: 验证 状态 


2.5 ”按钮 


Bootstrap 为 按钮 提供 了 很 多 漂亮 的 样式 。RSS 之 父 Dave Winer 也 是 
Bootstrap 的 忠实 粉丝 ， 他 曾 说 过 : 
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Bootstrap 是 必需 的 、 绝 对 必要 的 ， 它 的 迅速 普及 就 是 明证 。 不 
光 我 的 服务 器 应 软件 会 用 到 它 ， 我 开发 的 模板 语言 里 也 少不了 
它 ， 这 样 只 要 用 户 想 使 用 Bootstrap， 随 时 随地 用 就 可 以 了 。 什 
么 也 不 用 做 ， 也 不 用 包含 什么 库 。 就 像 服务 器 硬件 的 一 部 分 ， 
跟 革 有 果 1984 年 在 Mac OS 上 所 做 的 一 样 。 





Dave Winer 
scripting.com 


我 认为 Bootstrap 最 大 的 好 处 是 统一 Web 界 面 和 体验 。 有 了 
Bootstrap， 你 在 任何 站 点 上 一 眼 束 能 看 出 它 使 用 了 什么 按钮 。 网 格 系 
统 和 其 他 很 多 功能 都 隐藏 在 后 台 ， 但 按钮 、 表 单 ， 以 及 其 他 外 观 一 臻 
的 元 素 也 是 Bootstrap 的 重要 组 成 部 分 。 每 当 看 到 使 用 Bootstrap 的 网 
站 ， 我 都 有 一 种 跟 站 长 击 掌 致意 的 冲动 ， 就 像 几 年 前 我 在 某 些 网 站 源 
代码 中 看 到 wp-content 时 一 样 。 


现在 ， 按 钮 和 链接 在 Bootstrap 中 的 外 观 很 像 。 任 何 带 .btn 类 的 元 素 
都 会 继承 灰色 圆 角 按钮 的 样式 。 不 过 ， 使 用 其 他 类 是 可 以 给 按钮 加 上 
颜色 的 〈 见 表 2-3 ) 。 


表 2-3 ”彩色 按钮 示例 














Eo classz"..." Vi 明 

Default btn 带 渐 变 的 灰色 标准 按钮 
btn btn-primary 表示 按钮 的 操作 相对 比较 重要 

m btn btn-info 用 于 代替 默认 的 标准 按钮 

Success btn btn-success 表示 成 功 或 积极 的 操作 
btn btn-warning 表示 对 相应 操作 要 格外 小 心 

Danger btn btn-danger 表示 人 危险 或 消极 的 操作 

LJ btn btn-inverse 用 于 代替 深 灰色 按钮 ， 无 关 语 义 

Link btn btn-link 让 按钮 看 起 来 像 链 接 ， 同 时 还 具备 按钮 的 行为 














由 于 IE9 不 能 剪 切 掉 圆 角 处 的 背景 渐变 ， 因 此 IE9 中 删除 
了 渐变 效果 。 正 在 显示 被 禁用 的 按钮 时 也 有 了 问题， 比如 文 
本 是 灰色 ， 而 且 还 带 有 难看 的 文本 阴影 。 





2.5.1 按钮 大 小 


如 果 你 希望 按钮 大 一 些 或 小 一 些 ， 可 以 给 链接 或 按钮 添加 .btn-Large、 
.btn-small 或 .btn-mini 类 ( 见 图 2-43): 


<p> 
«button class="btn btn-large btn-primary" type="button">Large button 
«[button» 
«button class="btn btn-large" type="button">Large button«/button» 
</p> 
«p» 
«button class="btn btn-primary" type-"button' »Default button«/button» 
«button class="btn" type-"button"»Default button«/button-» 
</p> 
«p» 
«button class="btn btn-small btn-primary" type-"button'"»Small button 
«[button» 
«button class="btn btn-small" type-"button"»Small button«/button» 
</p> 
«p» 
«button class="btn btn-mini btn-primary" type-"button"»Mini button 
«[button» 
«button class="btn btn-mini" type="button">Mini button«/button» 
</p> 


Default button Default button 
Small button Small button 
| Mini button Mini button 


2-43: 不 同 大 小 的 按钮 






















Bootstrap 预 定义 的 CSS 样 式 | 39 


如 果 想 创建 一 个 “ 块 级 ”按钮 ， 也 没 问 题 ,， 添加 .btn-block 类 〈 见 图 
2-44)。 此 时 的 按钮 宽度 是 100%: 
«button class="btn btn-large btn-block btn-primary" type="button"> 
Block-level button«/button» 


«button class="btn btn-large btn-block" type-z"button"»Block-level button 
«[button» 


Block level button 


Block level button 














图 2-44: 块 级 按钮 


2.5.2 ”禁用 按钮 的 样式 
对 于 链接 ， 只 要 添加 disabled 类 就 可 以 实现 颜色 变 浅 、 褪 掉 渐 变 的 
效果 ( 见 图 2-45): 


<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> 
<a href="#" class="btn btn-large disabled">Link</a> 


Primary link Link 


图 2-45. 禁用 的 链接 

















注意 ，.disabled 类 的 用 法 与 .active 类 很 相似 。 也 就 是 
说 ， 不 需要 .btn 前 级 ， 但 要 记 住 这 只 会 影响 样 式 。 如 果 你 
>，” 真 要 禁用 链接 ， 还 得 让 JavaScript 帮忙 。 
对 于 按钮 ， 添 加 disabled 属性 就 行 了 ( 见 图 2-46)。 这 样 就 会 禁用 按 
钮 ， 用 不 着 JavaScript: 








«button type="button" class="btn btn-large btn-primary disabled" 
disabled-"disabled"»Primary button«/button» 
«button type="button" class="btn btn-large" disabled»Button«/button-» 


Primary button Button 


2-46: 禁用 的 按钮 


2.6 图 上 三 


与 图 片 相 关 的 类 有 3 个 〈 见 图 2-47)， 可 用 于 为 图 片 应 用 一 些 简 
单 的 样式 : .img-rounded 79 Él Fr BJ Ud ff i JI border-radius:6px. 
.img-circle iÑ i ids JU border-radius:500px 使 图 片 变 成 圆 形 、.img- 
polaroid 会 添加 一 点 内 边 距 和 一 条 灰色 边框 ; 











«img srcz"..." classz"img-rounded"» 
«img srcz"..." classz"img-circle"» 
«img srcz"..." class-'"img-polaroid'» 
140 x 140 140 x 140 140 x 140 











2-47: 图 片 


2.7 图 标 


Bootstrap 附带 了 一 张 140 个 图 标的 精灵 图 (sprite) ， 这 些 图 标 可 用 于 
按钮 、 链 接 、 导 航 和 表单 字段 。 这 些 图 标 由 GLYPHICONS 提供 ， 参 
风 图 2-48, 
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2-48. GLYPHICONS 提供 的 图 标 


2.7.1 感谢 GLYPHICONS 提 供 图 标 

作 为 Bootstrap 的 用 户 ， 我 们 很 幸运 能 免费 使 用 GLYPHICONS 
(http://glyphicons.com/) 提供 的 图 标 。 请 各 位 开发 人 员 在 适当 的 情况 
下 ， 声 明 图 标 来 产 于 GLYPHICONS, 





GLYPHICONS Halflings 正 常情 况 下 是 要 收费 的 ， 但 经 过 
Bootstrap 和 GLYPHICONS 协商 ， 广 a inte 可 以 免费 使 用 
这 些 图 标 。 为 表 谢 意 ， 硕 望 各 位 在 合适 的 情况 下 注 明 图 标 源 于 
GLYPHICONS 并 给 出 链接 





Bootstrap 官 方 文档 


2.7.2 用 法 
要 使 用 图 标 ， 给 <i> 标签 添加 以 .tcon- 为 前 级 的 类 即 可 。 例 如 ， 要 使 
用 编辑 图 标 ， 给 ei» 标签 添加 .icon-edit 类 : 


«i class="icon-edit"></i> 
如 采 想 使 用 白色 图 标 ， 再 补充 一 个 .icon-white 类 即 可 : 


«i class="icon-edit icon-white"></i> 


按钮 组 


同时 使 用 按钮 组 和 图 标 ， 可 以 用 最 少 的 标记 设计 出 漂亮 的 界面 ( 见 
图 2-49). 


«div class-"btn-toolbar"» 
«div class-"btn-group"» 
«a class="btn" href="#"><i class-z'"icon-align-left"»«/i»«/a» 
«a class="btn" hrefz"£"»«i class-"icon-align-center"»«/i»«/a» 
«a class="btn" href="#"><i class-"icon-align-right"»«/i»«/a» 
«a class="btn" href="#"><i classz'"icon-align-justify"»«/i»«/a» 
</div> 
</div> 








2-49: 按钮 组 


2. 导航 
在 把 图 标 放 到 文本 旁边 时 ， 注 意 在 图 标 和 文本 间 留 出 适当 宇和 白 ( 见 
2-30) 。 和 下 一 章 还 会 进一步 讨论 关于 导航 的 代码 。 
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«ul class="nav nav-list"» 
«li class-"active"»«a href="#"><i classz"icon-home icon-white"»«/i» 
Home«/a»«/li» 
<li><a href="#"><i classz"icon-book"»«/i» Library«/a»«/li» 
<li><a href="#"><i class-"icon-pencil'»«/i» Applications«/a»«/li» 
<li><a href="#"><i class="i"></i> Misc«/a»«/li» 

</ul> 








B Library 
£ Applications 


Misc 





2-50: 基本 的 导航 列表 








eB 9 88 





Bootstrap 内 置 的 布局 组 件 


除了 前 一 章 介 绍 的 标记 ，Bootstrap 还 内 置 了 一 套 灵 活 的 组 件 ， 可 
用 于 设计 用 户 界 面 、 交 互 功能 ， 等 等 。 这 些 组 件 来 自 一 个 独立 的 
JavaScript 文件 ， 而 这 个 文件 可 以 通过 Bootstrap 的 日 定义 构建 工具 生 
成 ， 因 此 可 以 只 包含 你 需要 的 组 件 。 我 个 人 一 般 会 选择 所 有 组 件 ， 这 
样 束 有 了 最 大 有 的 灵活 性 。 


3.1 "Nix 
下 拉 菜 单 以 列表 形式 呈现 一 组 选项 ， 一 般 与 上 下 文 相关 ， 可 用 于 不 同 
的 元 素 、 导 航 、 按 钮 ， 等 等 。 除 了 图 3-1 所 示 的 基本 菜单 之 外 ， 下 拉 
菜单 还 可 以 包含 子 菜 单 。 





Action 
Another action 


Something else here 


Separated link 











图 3-1: 基本 的 下 拉 菜 单 
以 下 是 创建 这 个 下 拉 菜 单 的 代码 : 


«ul class-"dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
<li><a tabindex="-1" href="#">Action</a></li> 
<li><a tabindex="-1" href="#">Another action</a></li> 
<li><a tabindex="-1" href="#">Something else here</a></li> 
<li class="divider"></li> 
<li><a tabindex="-1" href="#">Separated link</a></li> 
</ul> 


选项 


1. 右 对 齐 
为 .dropdown-menu 添加 .pull-right Æ, aJ AiE FREALZ 
对 和 象 右边 绿 对 齐 : 





| 人 大大 
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«ul class-"dropdown-menu pull-right" rolez"menu" aria-labelledby-"dLabel"» 
</ul> 
uu 
2. FRE 
要 添加 像 图 3-2 所 示 那 样 的 子 保 单 ， 只 要 在 当前 下 拉 某 单 的 任意 <li> 
JU3& EJN .dropdown-submenu 即 可 : 
«ul class-"dropdown-menu" role-"menu" aria-labelledby-"dLabel"- 
«li class-"dropdown-submenu"» 


«a tabindex-"-1" href="#">More options«/a» 
«ul class-"dropdown-menu"» 





</ul> 
</li> 
</ul> 
默认 状态 上 近 子 菜单 子 菜单 左 对 章 
Action sana Second level link 
d level link 
Another action Another action mop TUN Tit 


S d level link 
Something else here Something else here TRU ABD A re 


Second level link 














3-2: 下 拉 菜 单 与 子 菜单 


3.2 ”按钮 组 


按钮 组 可 以 把 多 个 按钮 组 织 到 一 起 ( 见 图 3-3)。 利 用 按钮 组 可 以 把 几 
个 相关 的 按钮 (比如 文本 对 齐 按钮 ) 放 在 一 起 。 要 创建 按钮 组 ， 只 
把 相应 的 链接 或 按钮 放 在 一 个 类 为 .btn-group 的 «div» 中 即 可 : 


«div class-"btn-group"» 
«button class-"btn'»Left«/button» 
«button class-"btn'"»Middle«/button» 
«button class-"btn'"»Right«/button» 
</div> 
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Left | Middle | Right 











图 3-3: 包含 左 、 中 、 右 对 亨 按钮 的 按钮 组 


en i {TE (ILAI 3-4)， 可 以 用 类 为 .btn-toolbar 
的 «div» 来 包装 这 些 按钮 组 : 


<div class="btn-toolbar"> 
«div class="btn-group"> 
«a class="btn" href="#"><i class="icon-align-left"></i></a> 
«a class="btn" href="#"><i class="icon-align-center"></i></a> 
«a class="btn" href="#"><i class="icon-align-right"></i></a> 
«a class="btn" href="#"><i class="icon-align-justify"></i></a> 
</div> 
«div class="btn-group"> 
<a class="btn" href="#"><i class="icon-italic"></i></a> 
«a class="btn" href="#"><i class="icon-bold"></i></a> 
«a class="btn" href="#"><i class="icon-font"></i></a> 
«a class="btn" href="#"><i class="icon-text-height"></i></a> 
«a class="btn" href="#"><i class="icon-text-width"></i></a> 
</div> 
«div class="btn-group"> 
«a class="btn" href="#"><i class="icon-indent-left"></i></a> 
«a class="btn" href="#"><i class="icon-indent-right"></i></a> 
</div> 
</div> 














3-4: 按钮 工具 栏 


要 了 人 解 在 按钮 中 使 用 图 标的 更 多 信息 ， 请 参考 第 2 革 。 要 想 把 按钮 
垂直 堆叠 起 来 〈 见 图 3-5)， 可 以 在 .btn-group 后 面 再 添加 一 个 .btn- 
group-vertical 类 


«div class-"btn-group btn-group-vertical"» 


</div> 

















3-5. 垂直 按钮 组 


让 按钮 组 具有 单 选 按钮 和 复 选 框 的 功能 
要 想 让 按钮 组 具有 单 选 按钮 或 复 选 框 的 功能 ( 即 每 次 只 能 选 一 个 按 
钮 ， 或 每 次 可 选择 多 个 按钮 ) ， 只 要 多 写 几 行 标记 即 可 ， 其 他 的 事 儿 
JavaScript 都 会 替 你 做 好 。 详 细 信 息 将 在 第 4 章 讨论 。 


3 


要 在 下 拉 荣 单 中 使 用 按钮 ， 必 须 把 按钮 放 在 .btn-toolbar 





中 独立 的 .btn-group 中 。 


3.3 ”按钮 下 拉 菜 单 


要 为 按钮 添加 下 拉 菜 单 〈 见 图 3-6)， 只 需 把 按钮 和 下 拉 菜 单 包 装 在 一 
个 .btn-group 中 即 可 。 再 加 上 一 个 «span. class="caret"></span>， 就 
可 以 从 视觉 上 告诉 人 们 按钮 包含 下 拉 采 单 : 





«div class-"btn-group"» 
«button class="btn btn-danger"»Danger«/button» 
«button class="btn btn-danger dropdown-toggle" data-toggle-"dropdown"» 
«span class-'"caret"»«/span» 
«[button» 
«ul class-"dropdown-menu"» 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li class="divider"></li> 
<li><a href="#">Separated link</a></li> 
</ul> 
</div> 
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Action Action v Danger d Warning v Success ~ Info * Inverse v 


Bacon ipsum dolor sit amet "- nock spare ribs pork loin jowl meatloaf kielbasa 
boudin. Beef ribs brisket bo e: shoulder ball tip capicola rump. Sausage cow 
bone flank ball tip short ribs Another action am hock turducken beef ribs prosciutto jerky d 


chicken. Pig chuck meatloa ^ Something else here  atback chicken shankle ball tip pancetta capic 


Turkey swine pork chop, fal n tongue beef sausage. Sausage tongue pork 
andouille. Chicken sausage Separated link ibs. Swine boudin shank jowl, chuck jerky bilta 
tongue tail turducken salamrecnicken: 














图 3-6; 按钮 式 下 拉 菜 单 


下 拉 菜 单 可 以 配合 任意 按钮 大 小 : .btn-large. .btn, .btn-small 
或 .btn-mini, 3-7 展示 了 不 同 大 小 的 一 些 按钮 。 





Large button 7 Small button" | Mini button ~ 











图 3-7: 不 同 大 小 的 按钮 与 下 拉 菜 单 


3.3.1 分 隔 式 按钮 下 拉 菜 
分 隔 式 按钮 下 拉 菜 单 ( 见 图 3-8) 与 按钮 下 拉 菜 单 的 样式 相同 ， 但 有 分 
阳线 隔 开 左边 的 主 操 作 按 钮 和 右边 的 下 拉 菜 单 开关 按钮 。 





Action S 


Acti t jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf 
| id iudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausa 
| Another action ; andouille ground round. Ham hock turducken beef ribs prosciutto 


Temi Rs: mee. strip steak ribeye doner fatback chicken shankle ball tip pancett 


tback t-bone leberkas sirloin tongue beef sausage. Sausage tongu 
|, Separated link ! venison beef biltong beef ribs. Swine boudin shank jowl, chuck je 
tongue tairturaucken sarami chicken. 








图 3-8: 分 隔 式 按钮 下 拉 菜 单 





以 下 征 实现 分 隔 式 按钮 下 拉 荣 单 的 代码 : 


«div class-"btn-group"» 
«button class-"btn'»Action«/button-» 
«button class="btn dropdown-toggle" data-toggle-"dropdown"» 
«span class-"caret"»«/span» 


«[button» 
«ul class-"dropdown-menu"» 
«!-- dropdown menu links --> 
</ul> 
</div> 


3.3.2 上 拉 菜 

菜单 不 仅 可 以 下 拉 ， 也 可 以 上 拉 〈 见 图 3-9)。 要 把 默认 的 下 拉 改 成 上 
M, RZE .btn-group 容器 中 再 加 一 个 .dropup 类 就 行 了 。 另 外 ， 如 
果 还 想 让 上 拉 菜 单 与 开关 按钮 右 侧 对 齐 ， 则 需要 在 .dropdown-menu 中 
再 加 一 个 .pull-right 类 (注意 ， 开 关 按 钮 中 的 第 头 现 在 冲 上 了 了， 
为 菜单 会 从 上 面 弹 出 ): 

«div class="btn-group dropup"> 
«button class="btn">Dropup</button> 


«button class="btn dropdown-toggle" data-toggle="dropdown"> 
<span class="caret"></span> 





</button> 
«ul class-"dropdown-menu"» 
«!-- dropdown menu links --> 
</ul> 
</div> 
Action 


Another action 


Something else here 


Separated link 


Dropup ^4 Right dropup < 











3-9, 上 拉 菜 单 
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3.4 SMER 

Bootstrap 提供 几 种 不 同样 式 的 导航 元 素 ， 这 些 元 素 只 是 样式 不 同 ， 但 
都 具有 同样 的 标记 和 基准 的 .nav 类。 

Bootstrap 还 提供 了 一 个 辅助 的 .active 类 。 这 个 类 一 般 用 于 区 分 当前 
元 素 和 其 他 未 激活 的 元 素 。 可 以 把 这 个 类 应 用 给 主页 链接 ， 或 者 用 户 
当前 所 在 页 的 链接 。 








3.4.1 标签 形 导航 
要 创建 标签 形 导航 ( 见 图 3-10)， 只 要 给 一 个 无 序列 表 添 加 基本 
HJ .nav 和 .nav-tabs 类 即 可 : 


«ul class="nav nav-tabs"» 
«li class-"active"» 
«a href="#">Home</a> 
</li> 
<li><a href="#">Profile</a></li> 
<li><a href="#">Messages</a></li> 
</ul> 





Home Profile Messages 








3-10: 标签 形 导航 


3.4.2 Bg 3eTÉ EH 
Em EA REER (LE 3-11), JH .nav-pilis fV .nav-tabs 
AS RII nJ : 


«ul class="nav nav-pills"» 
«li class-"active"» 
«a href="#">Home</a> 
</li> 
<li><a href="#">Profile</a></li> 
<li><a href="#">Messages</a></li> 
</ul> 











Profile ^ Messages 
图 3-11: REKEM 


茶 用 导航 元 素 
要 想 禁 用 某 个 链接 ， 只 要 给 它 加 上 .disabled 类 ， 就 可 以 让 它 在 任何 
情况 下 (包括 hover 状态 下 ) 都 变 为 灰色 ( 见 图 3-12): 
«ul class="nav nav-pills"> 
-ti class="disabled"><a href="#">Home</a></li> 


</ul> 





Clickable link Clickable link Disabled link 





图 3-12: 禁用 链接 


3.4.3 ”垂直 堆肥 的 导航 
标签 形 和 胶 吉 形 导航 元 素 默认 都 是 水 平 排列 的 。 要 让 它们 垂直 堆 登 起 
来 ， 只 要 再 添加 一 个 .nav-stacked 类 即 可 。 图 3-13 和 图 3-14 是 垂直 
堆 全 的 标签 和 胶 窒 的 例子 。 
以 下 是 堆 登 式 导 航 的 代码 : 

«ul class="nav nav-tabs nav-stacked"> 


</ul> 





Home 
Profile 


Messages 











图 3-13; ESKS 





Bootstrap 内 置 的 布局 组 件 | 53 


LA TERNIR: 
«ul class="nav nav-pills nav-stacked "> 


</ul> 








Home 


Profile 


Messages 











图 3-14; ESSR 


3.4.4 SMI NES 

导航 菜单 与 下 拉 菜 单 的 语法 类 似 ( 见 图 3-15)。 上 默认 情况 下 ， 给 一 
个 列表 项 添加 .dropdown 类 ， 然 后 给 艇 人 套 在 这 个 列表 项 中 的 链接 添 
加 .dropdown-toggle 类 和 data-toggle="dropdown" TE, AARSE 
这 个 列表 项 中 的 无 序列 表 元 素 添 加 .dropdown-menu 类 即 可 : 


«ul class="nav nav-tabs"> 
«li class="dropdown"> 
«a class="dropdown-toggle" 
data-toggle-"dropdown" 
href="#"> 
Dropdown 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li class="divider"></li> 
<li><a href="#">Separated link</a></li> 
</ul> 
</li> 
</ul> 








Home Help iris RU 


Another action 
Something else here 


Separated link 











图 3-15; 党 下 拉 菜 单 的 标签 形 导航 


同样 ， 如 果 想 得 到 带 下 拉 莱 单 的 胶 吉 形 导航 〈 见 图 3-16)， 只 要 
把 .nav-tabs 类 替换 成 .nav-pitls 即 可 : 


«ul class="nav nav-pills"> 
<li class="dropdown"> 

<a class-"dropdown-toggle" data-toggle-" dropdown" href="#"> 
Dropdown 
«b class-'"caret'»«/b» 

</a> 

«ul class-"dropdown-menu"» 
«1--links--» 





</ul> 
</li> 
</ul> 
Action 


Something else here 


Separated link 











图 3-16: 带 下 拉 菜 单 的 胶 圳 形 导 航 


3.4.5 “导航 列表 


导航 列表 可 用 于 显示 一 组 导航 链接 ， 在 后 台 管 理 界 面 中 的 导航 区 比较 
常见 。 图 3-17 展示 了 某 后 台 管 理 界 面 侧 边栏 中 的 一 个 导航 列表 ， 其 
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中 的 链接 指向 常用 的 管理 页 面 。Bootstrap 项 目的 文档 也 使 用 了 这 种 
导航 列表 。 与 我 们 迄今 为 止 讨 论 的 导航 相似 ， 寻 航 列 表 也 征 市 .nav 
类 的 无 序列 表 ， 再 给 它 添加 一 个 .nav-list 类 ， 就 可 以 把 它 变 成 导航 
列表 : 





«ul class="nav nav-list"> 
<li class="nav-header">List Header</li> 
<li class="active"><a href="/">Home</a></li> 
<li><a href="#">Library</a></li> 
<li><a href="#">Applications</a></li> 
<li class="nav-header">Another List Header</li> 
<li><a href="#">Profile</a></li> 
<li><a href="#">Settings</a></li> 
<li class="divider"></li> 
<li><a href="#">Help</a></li> 
</ul> 





LIST HEADER 


Library 


Applications 


ANOTHER LIST HEADER 
Profile 
Settings 


Help 








3-17: 导航 列表 


水 平分 隔 线 
要 添加 水 平分 隔 线 ， 使 用 带 .divider 类 的 空 的 <li> 元 素 即 可 : 
«ul class-"nav-menu'» 
«li class-"divider"»«/li» 


</ul> 








3.4.6 可 切换 的 标签 导航 


除了 可 以 创建 标签 形 导 航 元 素 ， 还 可 以 借助 JavaScript 插件 添加 交 
互 功能 ， 打 开 不 同 的 标签 页 ( 见 图 3-48) 。 一 定 要 分 别 为 每 个 标签 页 
(.tab-pane) 定义 一 个 唯一 的 ID ， 并 把 它们 包装 在 .tab-content ILA 
中 : 


«div class="tabbable"> 
«ul class="nav nav-tabs"» 
«li class-" active" »«a href="#tab1" data-toggle-"tab"»2Meats 
«[/a»«[li» 
<li><a href="#tab2" data-toggle-"tab"»More Meat«/a»«/li» 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<p>Bacon ipsum dolor sit amet jerky flank. ..</p> 
</div> 
<div class="tab-pane" id="tab2"> 
<p>Beef ribs, turducken ham hock. ..</p> 
</div> 
</div> 
</div> 





Meats More Meat 


Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf 
boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausa 
bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciuttc 
chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancet 











B 3-18: 可 切换 的 标签 导航 


如 果 想 让 标签 切换 时 带 有 淡 入 淡出 动画 ， 只 要 给 每 个 .tab-pane 加 
上 .fade 类 即 可 。 


标签 的 位 置 也 是 可 以 设置 的 ， 可 以 让 它们 位 于 标签 页 顶部 、 底 部 ， 甚 
至 两 侧 〈( 见 图 3-19), 
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Howdy, I'm in Section B 


Section A Section B Section C 





3-19. 标签 位 于 底 首 


以 下 是 把 标签 定位 到 底部 的 代码 ， 记 住 .tab-content 和 .nav-tabs 的 
位 置 也 要 互 换 : 


«div class="tabbable tabs-below"> 
<div class="tab-content"> 
«div class="tab-pane active" id="tab1"> 
<p>I'm in Section A.«/p» 
</div> 
<div class="tab-pane" id="tab2"> 
<p>I'm in Section B.</p> 
</div> 
«div class-"tab-pane" id="tab3"> 
«p»I'm in Section C.«/p» 
</div> 
</div> 
<ul class="nav nav-tabs"> 
«li class="active"><a href="#tab1" data-toggle-"tab"»Section A</a></li> 
<li><a href="#tab2" data-toggle="tab">Section B</a></li> 
<li><a href="#tab3" data-toggle="tab">Section C</a></li> 
</ul> 
</div> 


要 让 标签 显示 在 左 侧 (WE 3-20), 添加 .tabs-left 类 : 





«div class-"tabbable tabs-left"> 
«ul class="nav nav-tabs"» 
«li class-"active"»«a href="#tab1" data-toggle-"tab'»Section A«/a»«/li» 
<li><a href="#tab2" data-toggle-"tab"»Section B«/a»«/li» 
<li><a href="#tab3" data-toggle-"tab"»Section C«/a»«/li» 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<p>I'm in Section A.</p> 
</div> 
<div class="tab-pane" id="tab2"> 
<p>I'm in Section B.</p> 
</div> 
<div class="tab-pane" id="tab3"> 








<p>I'm in Section C.</p> 
</div> 
</div> 
</div> 





Section A l'm in Section A. 


Section B 


Section C 











3-20: 标签 在 左 侧 
标签 在 右 侧 要 使 用 .tabs-right 类 ( 见 图 3-21): 


<div class="tabbable tabs-right"> 
«ul class="nav nav-tabs"> 
«li class="active"><a href="#tab1" data-toggle="tab">Section A«/a»«/li» 
<li><a href="#tab2" data-toggle="tab">Section B«/a»«/li» 
<li><a href="#tab3" data-toggle="tab">Section C«/a»«/li» 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<p>I'm in section A.</p> 
</div> 
<div class="tab-pane" id="tab2"> 
<p>I'm in section B.</p> 
</div> 
«div class-"tab-pane" id="tab3"> 
«p»I'm in section C.«/p» 
</div> 
</div> 
</div> 





l'm in section C. 
Section A 


Section B 


Section C 











3-21: 标签 在 右 侧 
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Rj 1 


这 里 的 可 切换 标签 导航 甚至 可 以 用 于 设计 目的 之 外 的 用 途 。 
E» 比如 ， 我 就 用 它 来 控制 导航 和 子 导 航 。 换 名 话说 ， 单 击 导 


航 玉 单 时 ， 子 导航 会 改变 ， 显示 不 同 的 链接 。 








3.5 ”导航 条 


导航 条 是 一 个 常用 的 组 件 ， 也 是 Bootstrap 的 特色 功能 ( 见 图 3-22). 
基本 的 导航 条 包含 站 点 名 和 几 个 导航 链接 。 可 以 对 基本 的 导航 条 加 以 
扩展 ， 添 加 表单 控件 和 下 拉 某 单 。 为 保证 导航 条 与 页 面 同 宽 ， 可 以 把 
它 放 在 类 为 .span12 或 者 .container 的 容 絮 元素 中 。 











«div class="navbar"> 
«div class="navbar-inner"> 
«a class="brand" href="#">Title</a> 
«ul class="nav"> 
«li class="active"><a href="#">Home</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 
</div> 
</div> 





Title Home Link Link 











图 3-22: 基本 的 导航 条 


注意 代码 中 的 .brand 类 ， 这 个 类 会 把 文本 的 font-weight 设置 得 更 细 
一 些 ， 把 font-size 设置 得 更 大 一 些 。 





«a class-"brand" href="#">Project name</a> 


3.5.1 “导航 条 链接 

给 导航 条 (图 3-23) 添加 链接 很 向 单 ， 就 是 在 导航 条 代码 中 租 入 无 序 
列表 ， 并 为 它 添 加 .nav 类 。 如 果 想 在 链接 上 间 添 加 分 隔 线 ， 就 添加 一 个 
类 为 .divider-vertical 的 空 列 表 项 即 可 : 
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«ul class="nav"> 
«li class-"active"»«a href="#">Home</a></li> 
<li><a href="#">First Link«/a»«/li» 
<li><a href="#">Second Link</a></li> 
<li class="divider-vertical"></li> 
<li><a href="#">Third Link</a></li> 
</ul> 





Home First Link Second Link Third Link 





3-23: 导航 链接 


3.5.2 ”表单 

EFM PARARE EH .navbar-form 类 ， 这 样 才 能 保证 表单 的 外 
边 距 合适 ， 而 且 与 导航 样式 一 致 〈 见 图 3-24) 。 另 外 ，.puLL-Left 和 
.pULL-right 辅助 类 可 以 把 表单 定位 到 导航 条 左 侧 或 右 侧 : 





<form class="navbar-form pull-left"> 
«input type="text" class-"span2" id="fname"> 
«button type="submit" class="btn"> 

</form> 





Submit 








3-24: 默认 的 导航 条 表单 


想 要 10S 设备 中 的 那 种 圆 头 输入 框 ( 见 图 3-25) ? 用 .navbar-search 
类 代替 .navbar-form 类 : 
«form class-"navbar-search"  accept-charset-"utf-8"» 


«input type="text" class-"search-query" placeholder-"Search'» 
</form> 





Search 








3-25: 导航 条 搜索 输入 框 
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3.5.3 ”导航 条 菜单 

Bootstrap 导航 条 的 定位 方式 多 种 多 样 。 默 认 情 况 下 ， 导 航 条 是 块 级 元 
素 ， 其 定位 依据 是 它 在 HTML 中 的 位 置 。 为 导航 条 添加 不 同 的 辅助 
类 ， 可 以 改变 它 的 定位 方式 ， 比 如 让 它 出 现在 页 面 顶部 、 底 部 ， 或 者 
BEA UA EE DS 27] V 1 o 


1. 固 项 导航 条 

如 果 想 让 导航 条 固定 在 页 面 顶部 ， 在 .navbar 类 后 面 再 增加 一 个 
.navbar -fixed-top 类 即 可 。 为 防止 导航 挡住 页 面 中 的 其 他 元 素 ， 至 少 
要 给 <body> 标签 添加 40 像素 的 内 边 距 : 





«div class="navbar navbar-fixed-top"» 
«div class-"navbar-inner"'» 
«a class-"brand" href="#">Title</a> 
«ul class-"nav'» 
«li class-"active"»«a href="#">Home</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 
</div> 
</div> 


2. 固 底 导航 条 

要 让 导航 条 粘 附 于 页 面 底部 ， 只 要 把 .navbar-fixed-top 类 改 为 
.navbar-fixed-bottonm 类 即 可 。 同 样 ， 为 防止 导航 条 与 其 他 元 素 重 登 ， 
至 少 要 给 <body> RIN 40 像素 的 内 边 距 : 





«div class-"navbar navbar -fixed-bottom"> 
«div class-"navbar-inner"» 
«a class-"brand" href="#">Title</a> 
«ul class-"nav'» 
«li class-"active"»«a href="#">Home</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 
</div> 
</div> 


3. ESRD ME 
要 创建 一 个 能 随 页 面 深 动 的 导航 条 ， 给 .navbar 后 面 添 加 .navbar- 





static-top 类 。 使 用 这 个 类 的 时 候 ， 不 要 求 给 <body> 添加 内 边 距 


«div class-"navbar navbar-static-top'» 
«div class-"navbar-inner"'» 
«a class-"brand" href="#">Title</a> 
«ul class-"nav"'» 
«li class-"active"»«a href="#">Home</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 
</div> 
</div> 


MRF 

跟 Bootstrap — à 导航 条 也 完全 可 以 像 图 3-26 所 示 
的 那样 具有 啊 应 能 力 。 想 让 导航 条 具有 啊 应 能 力 ， 请 把 需要 隐 纠 的 
内 容 包装 到 类 为 .nav-collapse.collapse 的 «div» 中 。( 请 参考 下 面 
的 代码 。) 显示 隐藏 内 容 的 按钮 〈 链 接 ) 要 有 一 个 .btn-navbar 类 和 
两 个 data-* 属性 : data-toggle 会 告诉 JavaScript 这 个 按钮 要 做 什 
么 ，data-target 表示 要 切换 的 元 素 。 三 个 类 为 .icon-bar 的 «span» 
可 以 创建 “汉堡 式 按钮 ”， 用 于 切换 类 为 .nav-collapse 的 «div» 中 的 
元 素 。 要 实现 啊 应 式 导 航 条 ， 还 必须 包含 bootstrap-responsive.css 和 
collapse.js 或 完整 的 bootstrap.js 文件 。 








Title 
Home 
Link 
Link 


Dropdown ~ 


Search 


Link 


Dropdown ~ 











图 3-26: 响应 式 导 航 条 
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以 下 是 创建 啊 应 式 杜 航 条 的 示例 代码 : 


«div class="header"> 
«div class="navbar-inner"> 
«div class="container"> 
«a class="btn btn-navbar" data-toggle-"collapse" 
data-target-".nav-collapse"» 
«span class-"icon-bar"»«/span» 
«span class-"icon-bar"»«/span» 
«span class-"icon-bar"'»«/span» 
</a> 





«1-- 始终 显示 导航 条 的 名 字 --> 
«a href="#" class-"brand"»Project Name</a> 


<!-- 把 所 有 需要 隐藏 的 项 目光 、 加 到 这 里 - -> 


«div class-"nav-collapse collapse"» 
AD AD 


<!-- nav, .navbar-search SES --> 
</div> 


</div> 


</div> 
</div> 


5. 反 色 导航 条 
要 创建 反 色 导航 条 ， 即 图 3-27 所 示 的 黑 底 白字 的 导航 条 ， 只 要 
在 .navbar 类 后 和 面 添 加 .navbar -inverse 类 即 可 : 


«div class="navbar navbar-inverse"> 


</div> 

















图 3-27: 反 色 导航 条 


3.6 面包 届 式 导航 


包 届 式 导 航 非常 适合 展示 站 点 的 层级 关系 〈 见 图 3-28)。 以 博客 为 
例 ， 面 包 届 式 导 航 可 以 展示 发 表 日 期 、 类 别 或 标签 。Bootstrap 中 的 面 
包 届 式 导 航 就 是 一 个 类 为 .breadcrumb 的 无 序列 表 。 还 有 一 个 辅助 类 




















„divider 能 减 痰 颜色 、 减 小 字 写 ， 利 用 这 个 类 可 以 让 斜 杠 、 征 头等 符 
写 变 成 分 隔 答 。 注 意 ， 从 标记 来 看 ， 和 面包 悄 式 导航 中 的 分 隔 符 与 导航 
条 中 的 不 太一 样 。 


以 下 代码 使 用 .breadcrumb 创建 面包 届 式 导航 : 








«ul class="breadcrumb"> 
<li><a href="#">Home</a> «span class-"divider"»/«/span»«/li» 
<li><a href="#">2012</a> «span class-'"divider"»/«/span»«/li» 
<li><a href="#">December</a> «span class-'"divider"»/«/span»«/li» 
<li><a href="#">5</a></li> 

</ul> 


<ul class="breadcrumb"> 
<li><a href="#">Home</a> <span class="divider">&rarr;</span></li> 
<li><a href="#">Dinner Menu</a> «span class="divider">&rarr;</span></li> 
<li><a href="#">Specials</a> <span class="divider">&rarr;</span></li> 
<li><a href="#">Steaks</a></li> 

</ul> 


<ul class="breadcrumb"> 
<li><a href="#">Home</a> <span class="divider">&raquo;</span></li> 
<li><a href="#">Electronics</a> <span class="divider">&raquo;</span></li> 
<li><a href="#">Raspberry Pi</a></li> 

</ul> 





Home 2012 December 5 


Home Dinner Menu Specials Steaks 


Home » Electronics » Raspberry Pi 








图 3-28: iBeB SET 


3.7 ”分 页 导航 

Bootstrap 分 页 导航 使 用 的 界面 元 素 同 样 是 无 序列 表 ， 而 且 这 个 无 序列 
表 同 样 包含 在 以 一 个 特殊 的 类 匹 别 于 其 他 元 素 的 «div» 中 。 了 最 简单 的 
情况 下 ， 给 «div» 添加 .pagination 类 ， 就 可 以 创建 一 行 带 边框 的 链 
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接 〈 见 图 3-29)。 无 序列 表 中 的 每 个 列表 项 都 可 以 使 用 .disabled 或 
.active 类 进一步 修饰 。 3-30 展示 了 使 用 这 两 个 辅助 类 的 例子 。 


以 下 是 简单 的 分 页 导航 : 


<div class="pagination"> 
<UL> 
<li><a href="#">&laquo;</a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo;</a></li> 
</ul> 
</div> 














图 3-29: 简单 的 分 页 导航 
以 下 是 使 用 辅助 类 进一步 修饰 后 的 分 页 导航 : 


«div class-"pagination pagination-centered"> 
<UL> 
«li class="disabled"><a href="#">«</a></li> 
<li class="active"><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">»</a></li> 
</ul> 
</div> 








3-30: 使 用 辅助 类 的 分 页 导航 


除了 给 列表 项 添加 .active 和 .disabled 类 ， 还 可 以 给 它们 的 容 硕 
«div» 添加 .pagination-centered 类 ， 从 而 使 分 页 导航 居中 。 类 似 地 ， 





要 使 分 员 导 航 与 容器 右 对 齐 ， 则 使 用 .pagination-right 类 。 此 外 ， 
还 可 以 调整 分 页 导航 的 大 小 ， 用 于 调整 大 小 的 类 有 3 个 : .pagination- 
large. .pagination-small 和 .pagination-mini, [VfB Zn P, AR UE 
3-31: 


«div class-"pagination pagination-large"» 
«ul» 
</ul> 

</div> 

«div class="pagination"> 
<ul> 
</ul> 

</div> 

«div class-"pagination pagination-small"> 
«ul» 
</ul> 

</div> 

«div class-"pagination pagination-mini"> 
«ul» 
</ul> 

</div> 





« 1 2 3 4 5 » 











图 3-31: 调整 分 页 导航 的 大 小 


前 后 页 导航 

——— M HÁT UR 
与 分 页 导航 类 似 ， 也 需要 把 一 个 无 序列 表 包 装 在 一 个 «div» H, ERA 
情况 下 ， 前 后 页 导航 链接 是 居中 的 〈 见 图 3-32), 
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Previous Next 


图 3-32: 基本 的 前 后 页 导航 
以 下 是 实现 前 后 页 导航 的 代码 : 


«ul class-"pager'» 
<li><a href="#">Previous</a></li> 
<li><a href="#">Next</a></li> 
</ul> 


要 让 导航 链接 与 页 面 左 对 齐 或 右 对 齐 ， 需 要 给 相应 的 列表 项 添 


加 .previous fH .next 类 ( 见 图 3-33)。 与 图 3-30 中 的 分 页 导航 一 样 ， 
也 可 以 通过 添加 .disabled 类 创建 灰色 禁用 按钮 的 效果 。 





— Older Newer 一 











图 3-33: 对 章 后 的 页 面 链 接 
以 下 是 对 齐 页 面 链 接 的 代码 : 


«ul class-"pager'» 
«li class-'"previous"» 
«a href="#">&larr; Older«/a» 
</li> 
<li class="next"> 
<a href="#">Newer &rarr;</a> 
</li> 
</ul> 


3.8 ”标签 


Ar s AE S EM ERITAR, hemne. Bootstrap 提供 的 各 种 
标签 我 都 非常 喜欢 ， 图 3-34 展示 了 这 些 标 签 的 效果 。 





CED ED CD CD 0D CD 











图 3-34: 各 种 标签 
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以 下 是 实现 这 些 标签 的 代码 : 


«span class="label">Default</span> 

«span class-"label label-success">Success</span> 
«span class-"label label-warning"»Warning«/span» 
«span class-"label label-important"»Important«/span» 
«span class-"label label-info"»2Info«/span» 

«span class-"label label-inverse"»Inverse«/span» 


3.9 圆 标签 


圆 标签 (badge) 与 标签 类 似 ， 主 要 区 别 在 于 它们 的 两 头 更 圆 。 圆 标签 
的 颜色 与 标签 的 颜色 是 一 样 的 〈 见 图 3-35). 


© O 0O O O O 


图 3-35. ARE 











以 下 代码 展示 了 如 何 使 用 圆 标 签 : 


«span class="badge">1</span> 

«span class-"badge badge-success"»2«/span» 
«span class-"badge badge-warning"»4«/span» 
«span class-"badge badge-important"26«/span» 
«span class-"badge badge-info"58«/span» 
«span class-"badge badge-inverse"»210«/span» 


3.10 排版 相关 的 元 素 


除了 按钮 、 标 签 、 表 单 、 表 格 、 标 签 页 ，Bootstrap 还 提供 了 一 些 用 于 
VUE HERR) JUS e 


3.10.1 重头 消息 


重头 消息 (hero-unit) 是 一 个 内 容 区 块 ， 这 个 区 块 中 的 标题 字号 是 加 
大 的 ， 而 且 边 距 也 比较 大 ， 适 合 放 在 着 陆 页 面 ( 见 图 3-36)。 要 在 页 面 
中 放 一 个 重头 消息 ， 只 要 给 容 絮 <div> 添加 .hero-unit 类 即 可 。 除 了 
<h1> 的 字号 会 加 大 以 外 ， 所 有 文本 的 font-weight 都 被 减少 到 了 200: 
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«div class-"hero-unit"» 
«hi»Hello, World!«/hi» 
<p>This is a simple hero unit, a simple jumbotron-style component for 
calling extra attention to featured content or information.«/p» 
<p><a class="btn btn-primary btn-large"»Learn more«/a»«/p» 


</div> 





Hello, world! 


This is a simple hero unit, a simple jumbotron-style component for 


calling extra attention to featured content or information. 


Learn more 











图 3-36: 重头 消息 


3.10.2 页面 标题 

页 面 标题 〈( 见 图 3-37) 会 给 页 面 中 的 标题 添加 更 多 的 间隙， 非常 适合 
区 分 一 个 页 面 中 的 多 个 标题 。 要 使 用 页 面 标题 ， 把 标题 都 包 浅 在 类 为 
.page-header 的 «div» 中 即 可 : 


«div class="page-header "> 
<h1>Example page header <small>Subtext for header</small></h1> 


</div> 





Example page header Subtext for header 











图 3-37: 页 级 标题 


3.11 ARE 


很 多 网 站 都 需要 以 网 格 布局 显示 图 片 ，Bootstrap 为 此 提供 了 一 种 便捷 
的 组 件 一 一 缩 略 图 。 要 创建 缩 略 图 ， 只 要 给 图 片 加 上 <a> 标签， 再 给 





这 个 标签 添加 .thumbnail 类 即 可 。 这 样 就 可 以 给 图 片 加 上 4 像素 的 内 
边 距 和 一 个 灰色 边框 〈 见 图 3-38)。 而 且 ， 鼠 标 指针 悬 停 时 ， 图 片 四 
周 还 会 出 现 动 态 光 学 。 





260x180 260x180 260x180 260x180 











3-38. 简单 的 编 略图 


使 用 以 下 代码 创建 缩 略 图 : 


«a href="#" class-"thumbnail"» 
«img alt-"Kittens!" style="" srcz"http://placekitten.com/300/250"- 
</a> 


在 这 个 简单 的 缩 略图 基础 上 ， 还 可 以 添加 标题 、 按 钮 、 文 本 ， 如 图 3-39 
所 示 。 为 此 ， 需 要 把 类 为 .thumbnail 的 «a» 标签 换 成 -div>。 在 这 个 
«div» 中 ， 就 可 以 添加 任何 内 容 了 。 由 于 此 时 的 容 右 是 <div>， 因 此 可 
以 通过 默认 的 .span* 类 来 设置 缩 略 图 大 小 。 如 条 要 显示 多 个 缩 略 图 ， 
那 就 把 它们 放 到 一 个 无 序列 表 中 ， 每 个 列表 项 都 会 泽 动 到 左 侧 。 








Meats Meats Meats 

Bacon ipsum dolor sit amet sirloin Bacon ipsum dolor sit amet sirloin Bacon ipsum dolor sit amet sirloin 
pancetta shoulder tongue doner, pancetta shoulder tongue doner, pancetta shoulder tongue doner, 
shank sausage. shank sausage. shank sausage. 
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以 下 御 为 缩 略图 浴 加 更 多 内 容 的 示例 代码 : 


«ul class-z"thumbnails"» 
«li class-"span4"» 
«div classz"thumbnail"» 
«img data-src-"holder.js/300x200" altz"300x200" style=""> 
«div class="caption"> 
«h3»2Meats«/h3» 
«p»Bacon ipsum dolor sit amet sirloin pancetta shoulder tongue doner, 
shank sausage.«/p» 
<p><a href="#" class="btn btn-primary"-Eat now!«/a» «a href="#" 
class="btn">Later...</a></p> 
</div> 
</div> 
</li> 
<li class="span4"> 


</li> 
</ul> 


3.12 ”警示 框 


与 第 4 章 会 讲 到 的 模 态 对 话 框 类 似 ， 警 示 框 是 一 种 为 用 户 消 息 添 加 
样式 的 组 件 〈 见 图 3-40)。 默 认 的 警示 框 效 果 可 以 通过 给 «div» W 
加 .alert 类 来 实现 : 
«div class="alert"> 
«a href="#" class-"close" data-dismiss-"alert"»&times;«/a» 


«strong»Warning!«/strong» Not to be alarmist, but you have now been alerted. 
</div> 





Warning! Not to be alarmest, but you have now been alerted. 











B 3-40: 简单 的 警示 框 


.alert 使 用 的 是 jQuery 的 警示 框 插件 ， 要 显示 关闭 警示 框 按钮 ， 
Nd 建 一 个 包含 data-dismiss-"alert" 属性 的 按钮 。 移 动 版 Safari 
和 Opera A 5i zs X15; 38H E href="#" 才 行 。 


如 果 用 户 消息 太 长 ， 可 以 考虑 使 用 .alert-block 类 。 这 个 类 会 给 包含 消息 
的 容 吉 上、 下 多 添加 一 些 边 跑 ， 让 多 和 ee ( 见 图 3-41), 








Dave Bowman: Open the pod bay doors, HAL. 


HAL: I'm sorry, Dave. l'm afraid | can't do that. 








图 3-41; 警示 信息 块 


22 3-42 所 示 ， 还 有 三 种 颜色 选项 ， 可 以 帮助 我 们 传达 警示 的 含 
三 种 关 色 的 栎 示 框 分 别 需 要 额外 添加 .alert-error,. .alert- 
success om .alert-info 类 。 





Error! Change a few things up and try submitting again.. 


Success! You successfully read this important alert message. 


Information! This alert needs your attention, but it's not super important. 











图 3-42; 警示 框 的 颜色 


3.13 ”进度 条 


进度 条 用 于 显示 资源 下 载 进度 ， 或 者 表示 页 面 中 的 元 素 发 生 了 状况 。 
个 人 认为 ， 进 度 条 在 Bootstrap 之 外 役 有 什么 用 武之 地 。 换 名 话说 ， 
在 使 用 Bootstrap 的 靶 去 众生 中 ， 真 会 创建 进度 条 的 人 只 是 极 少 数 。 
自然 地 ， 进 度 条 本 身 只 是 一 些 静 态 元 素 ， 需 要 JavaScript 代码 来 使 其 
拥有 交互 能 力 。 


SABE RE ARCUP IJ UK C. ERE RAS Er Ig dE C. dn 3-43 MR. 
进度 条 背景 用 类 为 .progress HJ «div» 创建 ， 进 度 条 用 类 为 .bar 的 
«div» 创建 。 进 度 条 的 百分比 则 是 通过 在 style 属性 中 指定 CSS 的 
width [fix Hy, X HH style="width: 609;" 表示 进度 完成 了 6096: 








«div class-"progress"» 
«div class-"bar" style="width: 60%;"></div> 
</div> 
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——— áÁ— H—— 
图 3-43; 默认 的 进度 条 


创建 带 条 纹 的 进度 条 ( 见 图 3-44) “， 只 需 给 容器 «div» 添加 .progress- 
striped 类 即 可 : 











«div class-"progress progress-striped'» 
«div class-"bar" style="width: 209;"»2«/div» 
</div> 





aR Raa 
3-44; 带 条 弘 的 进度 条 


这 个 之 条 纹 的 进度 条 古 静 态 的 。 还 可 以 让 条 纹 动 起 来 ， 像 理发 店 门 口 
的 转 花 简 一 样 (图 3-45 是 动态 条 纹 进 度 条 的 静态 截图 )。 














、 9 9 9 9c c7. | 
3-45; 动态 条 纹 版 的 进度 条 
以 下 是 让 进度 条 动 起 来 的 代码 : 











«div class="progress progress-striped active"» 
«div class-"bar" style="width: 40%;"></div> 
</div> 


除了 蓝 色 进度 条 之 外 ， 还 可 以 有 绿色 、 黄 色 和 红色 进度 条 ， 需 要 额外 


添加 的 类 分 别 是 .bar-success、 Re 和 .bar-danger。 还 可 像 
下 面 这 样 把 进度 条 拼接 起 来 ， 基 于 多 个 元 素 构 成 某 种 图 案 : 


«div class-"progress"» 
«div class-'"bar bar-success" style="width: 355*;"»«/div» 
«div class-"bar bar-warning" style="width: 20%;"></div> 
«div class-"bar bar-danger" style="width: 10%;"></div> 
</div> 


注 1: 条 纹 式 进度 条 在 IE7 和 IE8 中 无 效 。 








cÁ 
3-46: gJEeK B XE R 


3.14 ”媒体 对 和 象 


在 Facebook, Twitter 等 社交 网 站 上 ， 去 挥 一 些 与 时 间 线 相关 的 格式 ， 
就 能 看 到 媒体 对 象 了 ( 见 图 3-47)。Bootstrap 根据 OOCSS (H m X} 
象 的 CSS) 社区 的 共识 推出 的 媒体 对 象 ， 其 目的 就 是 为 了 减少 开发 这 
种 信息 块 的 代码 。Nicole Sullivan-Hass 在 她 自己 的 站 点 (http://www. 
stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds- 
of-lines-of-code/) 上 分 享 了 一 些 与 sanie 提供 的 类 似 的 媒体 对 象 。 
有 了 媒体 对 象 ， 不 仅 能 够 闻 省 数 百 行 代码 ， 还 可 简化 目 定义 。 














m3 Nicole Sullivan Going to Ocean Beach with Cloverific. Beautiful 
F day! Feeling better! WOOt! 
已 2 hours ago via Twitter A - Comment - Like - Qstubbornella on Twitter 


Write a comment... 


§ B Nicole Sullivan It was so gorgeous. Amazing. I think I'll 
B go again tomorrow if the weather holds. :) 


a few seconds ago - Delete 






7 


Ls EL 
B 


g^ Raj Shekhar and Ambar Pansari like this. 


EE 2 hours ago via Twitter @ - Comment - Like - @stubbornella on Twitter 











3-47: 媒体 对 象 


Bootstrap 把 设计 和 添加 样式 的 自由 留 给 了 用 户 ， 但 为 此 提供 了 坚实 
的 基础 。 “Doon 中 的 其 他 组 件 一 样 ， 媒 体 对 象 的 目标 (标记 少 、 
易 扩 展 ) 也 是 通过 给 一 些 向 单 的 标记 应 用 类 来 实现 的 。 有 两 种 媒体 对 
P: .media 和 .media-list, BI 3-48 展示 了 前 一 种 形式 的 媒体 对 象 。 
如 果 你 准备 的 是 一 个 无 序列 表 ， 那 么 就 使 用 .media-list; 如 果 你 只 有 
一 个 «div» 元素， 那么 就 使 用 .media: 
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«div class-"media"» 
«a class-"pull-left" href="#"> 
«img class-"media-object" data-src-"holder.js/64x64"» 
</a> 
«div class-z"media-body"» 
«h4 classz"media-heading"»Media heading«/h4» 
<p>. ..«/p» 


«1-- REMEE R --> 
<div class="media"> 
</div> 
</div> 
</div> 





Media heading 

64x64 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce 
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 


Media heading 

64x64 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce 
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 


Media heading 

64x64 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante 
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra 
turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis 
in faucibus. 











3-48: 默认 的 媒体 对 象 


要 使 用 媒体 列表 ( 见 图 3-49)， 把 容器 <div> 改 为 <ul>， 然 后 添 
加 .media-list 类 。 因 为 媒体 对 象 可 以 藤 套 ， 所 以 很 适合 展示 评论 或 
其 他 需要 以 列表 展示 的 信息 。 











Media heading 
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 


Nested media heading 

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante 
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra 
turpis. 


Nested media heading 

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 
ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 
tempus viverra turpis. 


Nested media heading 

64x64 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante 
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra 
turpis. 


Media heading 
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 64x64 
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 








图 3-49. 媒体 列表 示例 
以 下 是 创建 媒体 列表 的 代码 : 


«ul class-"media-list"» 
«li class-"media"» 

«a class-"pull-left" href="#"> 
«img class-"media-object" data-src-"holder.js/64x64"» 

</a> 

«div class-"media-body"» 
«h4 class-"media-heading"»Media heading«/h4» 
«p»...«/p» 


<!-- WEEER R --> 
«div class-"media"» 
</div> 
</div> 
</li> 
</ul> 


3.15 ”其 他 组 件 


还 有 几 个 Bootstrap 组 件 本 草 没 有 介绍 ， 有 的 是 用 于 布局 的 ， 有 的 只 
是 辅助 类 。 比 如 ， 洼 地 (well), 
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3.15.1 洼地 

洼地 (well) 就 是 一 个 容器 <div>， 让 其 中 的 内 容 看 起 来 像 是 陷入 页 
面 一 样 ( 见 图 3-50)。 我 一 般 用 注 地 来 显示 博客 的 元 信息 ， 比 如 作者 、 
日 期 和 类 别 。 要 创建 洼地， 只 要 把 内 容 包 装 在 类 为 .well 的 <div> 中 
BN 可 : 


«div class-"well'» 


</div> 


Look, l'm in a well! 











3-50; 洼地 


还 有 两 个 类 可 以 与 .well 同时 使 用 : .well-large fH .well-small, iX 
两 个 类 影响 内 边 距 ， 前 者 会 增 大 内 边 距 ， 后 面 会 减 小 内 边 距 (E 
3251). 





Look, I'm in a .well-large! 


Look, l'm in a .well-small! 











3-51: 与 洼地 相关 的 可 选 类 
以 下 代码 使 用 了 注 地 相关 的 类 : 


«div class="well well-large"> 
Look, I'm in a .well-large! 

</div> 

<div class="well well-small"> 
Look, I'm in a .well-small! 


</div> 
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3.15.2 辅助 类 
以 下 是 几 个 方便 的 辅助 类 。 


1， 向 左 浮动 

要 想 把 元 素 浮 动 到 容 絮 左 侧 ， 使 用 .pull-left 类 : 
<div class="pull-left"> 
</div> 
.pull-left { 


float: left; 
} 


2. BAZ Z) 
HETRE AAN, EH .puLL-right X: 
<div class="pull-right"> 
</div> 
.pull-right { 
float: right; 


3. 清除 浮动 
要 清除 任何 元 素 的 浮动 ， 使 用 .clearfix 类 。 如 果 有 两 个 不 同 大 小 的 
元 于 都 问 一 侧 浮 动 ， 束 需要 把 那个 在 代码 中 位 于 后 面 的 元 素 问 下 推 或 
者 说 清除 之 前 的 内 容 。 使 用 一 个 之 .clearfix X AE «div» W a ELA 
到 这 个 目的 : 


<div class="clearfix"></div> 


.Clearfix { 
*zoom: 1; 
&:before, 
&:after ( 

display: table; 
content: ""; 
} 
&:after { 
clear: both; 
} 
} 
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eB 4 t5 





Bootstrap 支 持 的 JavaScript 插 件 





第 3 草 介 绍 的 组 件 只 是 个 开始 。 在 此 基础 上 ，Bootstrap 还 附带 了 13 个 
jQuery 插件 ， 用 于 扩展 网 站 的 功能 、 丰 富 用 户 体验 。 要 使 用 Bootstrap 
的 JavaScript 插件 不 必 非 得 是 JavaScript 高 手 。 事 实 上 ， 利 用 Bootstrap 
的 Data API， 大 多 数 插件 无 需 编 写 一 行 代码 就 可 以 触发 。 


4.1 概述 


Bootstrap 有 两 种 形式 ， 一 种 是 编译 后 的 ， 一 种 是 原始 格式 。Bootstrap 
2.2.2 未 经 压缩 的 让 本 是 59 KB， 而 压强 之 后 的 版 本 只 有 32 KB. MA 
Bootstrap 的 插件 都 可 以 使 用 内 置 的 Data API 访 问 。 有 了 Data API, 
不 需要 写 JavaScript 代码 ， 束 能 为 网 页 添加 插件 。 


一 般 来 说 ，JavaScript 代码 都 保存 在 单独 的 文件 中 ， 或 者 放 在 页 面 
</body> 标签 之 前 。 如 有 条 是 单独 的 文件 ， 要 使 用 «script» BJ src JE 
性 把 它 链接 到 网 页 中 。 如 于 不 是 单独 的 文件 ， 则 可 以 把 代码 写 在 
<script>...</script> 标签 内 部 : 





<!-- 引用 单独 的 JavaScript 文件 --> 


«script src-"assets/js/javaScript.js"»«/script» 


«1-- 在 网 页 中 直接 写 JavaScript --» 
«script type-"text/javaScript"» 
function js alert( 
alert('Page has loaded'); 
} 


</script> 
通常 ， 最 好 先 检查 确认 DOM 已 经 就 绪 ， 然 后 再 执行 JavaScript 调用 
语句 。 在 DOM 就 绪 前 执行 JavaScript 调用 的 话 ， 浏 览 器 可 能 还 没有 
准备 好 要 操作 的 元 素 。 使 用 jQuery， 先 选择 文档 (或 整个 页 面 的 内 
容 ) 然后 调用 .ready() Ji WERTE T: 
$s(document).ready(function(){ 
alert('Page has loaded'); 


// 页 面 加 载 完成 后 ， 才 会 弹出 警告 杠 
135 


如 前 所 述 ，Bootstrap $é BE f "TUA A HTML 元 素 中 作为 数据 属性 的 





Data API。 如 条 想 解除 对 数据 属性 的 绑 定 ， 可 以 使 用 以 下 JavaScript 
代码 : 


S('body').off('.data-api') 


如 末 你 只 想 禁 用 茶 一 个 插件 ， 可 以 使 用 这 个 插件 的 命名 空间 加 上 


data-api 命名 空间 : 


S('body').off('.alert.data-api') 


可 编程 的 API 

Bootstrap 的 开发 者 希望 用 户 通过 JavaScript API 使 用 所 有 插件 。 所 有 

公开 的 API 都 是 单个 可 连 绥 的 方法 ， 返 回 操作 的 元 素 集合 : 
S('.btn.danger ').button('toggle').addClass('active') 

所 有 方法 都 可 以 接受 一 个 可 选 的 选项 对 象 、 一 个 表示 要 调用 的 方法 的 

字符 串 ， 或 者 什么 参数 也 不 接受 (表示 初始 化 插件 的 默认 行为 ): 
$("#myModal").modal()  // 初始 化 默认 功能 


$("4myModal").modal(( keyboard: false }) // 初始 化 不 文 持 键盘 
$("#myModal").modal('show') // 初始 化 并 立即 调用 show 


- S 
4.2 ”过 渡 
过 小 插件 可 以 实现 向 单 的 过 渡 效 果 ， 比 如 : 
。 模 态 对 话 框 的 请 入 衫 出 和 谈 入 淡出; 
。 标签 页 淡出 ， 
。 SEP META LB s 


。 请 入 请 出 旋转 面板 。 


4.3 模 态 框 


模 态 框 就 是 一 个 登 放 在 父 窗 口上 的 子 窗口 ( 见 图 4-1)。 模 态 框 经 常用 
于 显示 来 日 其 他 地 方 的 内 容 ， 让 人 可 以 与 之 交互 但 又 不 脱离 当前 窗口 
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的 上 和 下文。 这 种 子 窗口 可 以 展示 人 信息、 提供 交互 ， 等 等 。 我 一 般 使 用 
模 态 框 来 辟 放 幻灯 片 或 登录 /注册 信息 。 这 个 插件 差不多 是 我 喜欢 的 
Bootstrap 插件 了 。 


要 创建 静态 的 模 态 框 ， 使 用 以 下 代码 : 





«div class-"modal hide fade"> 
«div class="modal-header "> 
<button type="button" class="close" data-dismiss="modal" aria-hidden- 
"true">&times;</button> 
<h3>Modal header</h3> 
</div> 
<div class="modal-body"> 
<p>0ne fine body...«/p» 
</div> 
<div class="modal-footer"> 
<a href="#" class="btn">Close</a> 
<a href="#" class="btn btn-primary">Save changes</a> 
</div> 
</div> 








Modal header 


One fine body... 











4-1: 静态 的 模 态 框 


要 打开 模仿 杠 ， 必 须 有 一 个 触发 普 置 。 我 一 般 会 使 用 按钮 或 链接 ， 在 
下 面 代码 的 <a> "i rH, href= "myModal" 表示 你 要 在 页 面 上 加 载 的 模 
态 框 。 可 以 在 同一 个 页 面 上 创建 多 个 模 态 框 ， 并 为 它们 都 准备 一 个 触 
发 装置 。 当 然 ， 多 个 模 态 框 不 一 定 同时 都 加 载 到 页 面 中 ， 可 以 根据 需 
要 临时 向 页 面 中 加 载 。 


关于 模 态 框 ， 重 点 要 关注 3 个 类 。 Miemoda ERARE 
<div> 标注 为 模 态 框 。 第 二 个 是 .hide, X^ oer Vr Xll Vi, zs c TEUER S TEE 











隐 叫 起来， 在 用 户 单 击 触发 装置 时 再 显示 。 最 后 一 个 是 .fade， 这 个 
类 会 村 致 模 态 框 从 无 到 有 或 从 有 到 无 时 ， 以 淡 入 淡出 的 效 末 呈现 。 


<!-- 触发 模 态 框 的 按钮 - -> 
«a href-"4myModal" role="button" class="btn" data-toggle-"modal'» 
Launch demo modal«/a» 


<!-- 模 态 框 --> 
«div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
«div class="modal-header "> 
<button type="button" class="close" data-dismiss="modal" 
aria-hidden="true"> X </button> 
<h3 id="myModalLabel">Modal header</h3> 
</div> 
<div class="modal-body"> 
<p>0ne fine body. . .</p> 
</div> 
<div class="modal-footer"> 
<button class="btn" data-dismiss="modal" 
aria-hidden="true">Close</button> 
<button class="btn btn-primary">Save changes</button> 
</div> 
</div> 


4.3.1 用法 
使 用 Bootstrap HJ JavaScript Data API， 只 要 设置 儿 个 数据 属性 ， 就 


可 实现 模 态 框 的 调用 。 为 此 ， 在 作为 开关 的 链接 或 按钮 上 设置 data- 
toggle-"modal", ĦJE data-target="#foo" 设置 为 模 态 框 的 ID, 


要 通过 JavaScript 调用 id="myModal" 的 模 态 框 ， 只 需 一 行 代码 : 


$('#myModal').modal(options) 


4.3.2 选项 


选项 可 以 通过 数据 属性 传人 也 可 以 通 过 JavaScript 传 入 。 要 使 用 数据 
属性 ， 请 在 选项 名 称 前 加 上 data- ( 如 data-backdrop="")。 表 4-1 列 
出 了 模 态 框 的 一 些 选 项 及 说 明 。 
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表 4-1 模 态 框 的 选项 


名 


称 类 型 ”默认 值 


backdrop Boolean true 


keyboard Boolean true 


show Boolean true 


remote URL false 


4.3.3 万 法 
下 面 是 模 态 框 相关 的 儿 个 方法 。 


1. 
将 内 容 激 活 为 模 态 框 ， 接 受 可 选 的 选项 对 象 。 


选项 


.modal(options). 


说 明 

包含 模 态 框 背 板 元 素 。 如 和 朱 不 想 单 击 背 板 关闭 模 态 框 ， 
为 这 个 数据 属性 指定 static 

按 Esc 键 关 闭 模 态 框 

初始 状态 下 模 态 框 是 否 可 见 

如 果 提 供 了 远程 URL， 内 容 将 通过 jQuery 的 load 7j 
法 加 载 ， 然 后 插入 .modal-body 元 素 。 如 果 使 用 的 是 
数据 API， 可 以 使 用 href 属性 指定 远程 资源 地 址 ， 下 
面 古 一 个 例子 : 

«a data-toggle="modal" href="remote.html" data-target- 
"#modal">click me</a> 


$('#myModal').modal({ 
keyboard: false 


23 
2. 开关 
手动 开关 模 态 框 。 


.modal('toggle'). 


S('3smyModal').modal('toggle') 


3. 显示 
手动 打开 模 态 框 。 


.modal('show'). 


S( 'tmyModal').modal('show') 





4. 关闭 
手动 关闭 模 态 框 。 


.modal('hide'). 
S('stmyModal').modal('hide') 


4.3.4 事件 
Bootstrap 提供 了 表 4-2 PIIRA, «pH VALE ER C, 


表 4-2 模 态 框 事件 

事 件 说 HH 

show 在 实例 方法 show 被 调用 时 触发 

shown 在 模 态 框 已 经 对 用 户 可 见 时 (CSS 过 渡 完 成 后 ) 触发 
hide 在 实例 方法 hide 被 调用 时 触发 

hidden 在 模 态 框 已 经 对 用 户 不 可 见 时 (CSS 过 渡 完 成 后 ) 触发 


下 面 这 个 例子 是 在 模 态 框 关 闭 后 弹出 一 个 警 各 框 : 
$('#myModal').on('hidden', function () ( 


alert('Hey girl, I heard you like modals...'); 
}) 


4.4 下 拉 菜 单 

第 3 章 详 细 介 绍 过 下 拉 菜 单 ， 但 并 设 有 提 到 下 拉 菜 单 的 交互 功能 。 我 
们 知道 ， 下 拉 某 单 可 以 放 在 导航 条 、 胶 赛 形 导 航 、 标 和 俭 形 导航 和 按钮 
导航 中 。 





4.4.1 用 法 


要 使 用 下 拉 菜 单 ( 见 图 4-2)， 给 一 个 链接 或 按钮 添加 data-toggle= 
"dropdown" JBE, LEREM ME EFI F THRE, 
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JakeSpurlock.com | Work» Play ~ Live > 


Bacon ipsum dolor sit amet jer —— € re ribs pork loin jowl meatloaf kielbasa tail biltong pork 
boudin. Beef ribs brisket OO WordPress Development | ball tip capicola rump. Sausage cow tail strip steak t- 
bone flank ball tip short ribs and Speaking Engagements turducken beef ribs prosciutto jerky doner brisket 
chicken. Pig chuck meatloaf, stt hicken shankle ball tip pancetta capicola. 


Bacon ipsum dolor sit amet jerk Social Media re ribs pork loin jowl meatloaf kielbasa tail biltong pork 
boudin. Beef ribs brisket boudin beet bacon. Beet ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t- 








4-2: 导航 条 中 的 下 拉 菜 单 
以 下 征 创 建 珊 有 数据 属性 的 下 拉 荣 单 的 代码 : 


«li class-"dropdown"» 
«a href="#" id-"drop" role="button" class-"dropdown-toggle" 
data-toggle-"dropdown"»Word «b class-"caret'"»«/b»«/a» 
«ul class-"dropdown-menu" role-"menu" aria-labelledby-"drop"» 
<li><a tabindex-"-1" href="#">MAKE magazine«c/a»«/li» 
<li><a tabindex-"-1" href="#">WordPress DevelopmentS«/a»«/li» 
<li><a tabindex-"-1" href="#">Speaking Engagements«/a»«/li» 
«li class-"divider"»«/li» 
<li><a tabindex-"-1" href="#">Social Media«c/a»«/li» 
</ul> 
</li> 


如 果 你 想 让 链接 任何 时 候 都 可 以 打开 (比如 在 JavaScript 无 效 时 也 能 打 
JP). HH data-target="#" 代 赫 href="#"， 并 给 href 属性 指定 链接 : 
«div class="dropdown"> 
«a class-"dropdown-toggle" id="dLabel" role="button" 
data-toggle-"dropdown" data-target="#" href="/page.html"> 
Dropdown 
<b class="caret"></b> 
</a> 
«ul class-"dropdown-menu" role-"menu" aría-labelledby-"dLabel"» 
</ul> 
</div> 


4.4.2 通过 JavaScript 使 用 下 拉 菜 单 
要 通过 JavaScript UH P duse, BE FH AD P IRR: 


$('.dropdown-toggle').dropdown() 





4.4.3 万 法 
有 一 个 简单 的 方法 可 以 在 代码 里 打开 或 隐藏 下 拉 菜 单 ， 没 有 选项 ; 


$().dropdown( ' toggle') 


4.5 ”滚动 监控 器 

Scrollspy 插件 ( 见 图 4-3) 可 以 根据 滚动 位 置 更 新 导航 链接 。 在 静态 
实现 中 ， 可 以 根据 滚动 位 置 给 导航 条 添加 active 类 。 要 通过 数据 属 
性 添加 Scrollspy 插件 ， 把 data-spy="scroll" WIE "Urs" (spy) 
的 元 素 (通常 是 页 面 主体 )， 把 data-target=" .navbar" 设置 为 要 根据 
深 动 改变 类 的 滚动 条 。 田 外 ， 被 监控 的 元 素 中 还 要 有 对 应 的 元 素 ， 其 
ID 与 导航 条 链接 的 引用 目标 一 致 。 








Jake's BBQ Home Pork Beef Chicken 


Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork 
boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t- 











4-3: 滚动 监控 示例 


4.5.1 用 法 
如 果 要 监控 页 面 主 体 ， 需 要 给 <body> 标签 添加 data-spy= "scroll", 
以 及 一 个 data-target=" .navbar" 属性 ， 当 然 这 个 data-target 指 问 显 
示 导 航 链 接 的 导航 条 : 

«body data-spy="scroll" data-target=".navbar">...</body> 


在 导航 条 中 ， 需 要 让 每 个 链接 都 充当 页 面 中 错 点 (ID) 的 指示 器 
(href): 


<div class="navbar"> 
«div class="navbar -inner "> 
<div class="container"> 
<a class="brand" href="#">Jake's BBQ</a> 
<div class="nav-collapse"> 
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«ul class="nav"> 
«li class-"active"»«a href="#">Home</a></li> 
<li><a hrefz'"Zpork"»Pork«/a»«/li» 
<li><a href="#beef">Beef</a></li> 
<li><a href="#chicken">Chicken</a></li> 


</ul> 
</div><!-- /.nav-collapse --> 
</div> 
</div><!-- /navbar-inner --> 
</div> 
通过 JavaScript 使 用 


如 果 不 是 通过 数据 属性 ， 而 是 要 通过 JavaScript 来 调用 滚动 监控 插件 ， 
首先 要 选择 作为 指示 絮 的 深 动 条 ， 然 后 调用 .scrollspy() Kr: 


$('#navbar').scrollspy() 


4.5.2 .scrollspy('refresh') 方 法 
在 通过 JavaScript 调用 演 动 监控 插件 上 时， 需要 调用 .scrollspy 
('refresh') 方法 更 新 DOM。 这 样 可 以 反映 最 新 DOM 结构 。 


$('[data-spy="scroll"]').each(function () { 
var S$spy = S(this).scrollspy('refresh') 
135 


4.5.3 选项 

选项 可 以 通过 数据 属性 或 JavaScript 设置 。 在 使 用 数据 属性 时 ， 要 给 
选项 名 称 前 面 加 上 data- 前 级 ， 比 如 data-offset-"" ( 见 表 4-3). 

表 4-3 RIRS 

名 称 类 型 默认 值 说 明 

offset number 10 计算 深 动 位 置 时 距离 顶部 的 偏 移 量 


在 使 用 固定 导航 条 的 情况 下 ，offset 选项 是 很 有 用 的 。 为 正确 计算 滚 
动 位 置 ， 应 该 将 这 个 选项 设置 为 50 像素 左右 〈 见 表 4-4). 





4.5.4 事件 

表 4-4 滚动 监控 器 事件 

E fr 说 BH 

activate SES) EEE ar ETE BUD 73 


4.6 可 切换 的 标签 页 


第 3 章 介 绍 了 可 切换 的 标签 导航 。 通 过 组 合 一 些 数据 属性 ， 很 容易 创 
建 标签 页 式 界 面 ( 见 图 4-4)。 为 此 ， 先 创建 一 个 .nav 用 于 导航 ， 然 
后 再 把 标签 页 的 内 容 包 装 在 类 为 .tab-content 的 «div» 中 : 


«ul class="nav nav-tabs"> 
<li><a href="#home" data-toggle-"tab"»Home«/a»«/li» 
<li><a href="#profile" data-toggle-"tab"»Profile«/a»«/li» 
<li><a href="#messages" data-toggle="tab">Messages</a></li> 
<li><a href="#settings" data-toggle="tab">Settings</a></li> 








</ul> 


<div class="tab-content"> 
<div class="tab-pane active" id="home">...</div> 
<div class="tab-pane" id="profile">...</div> 
<div class="tab-pane" id="messages">...</div> 
<div class="tab-pane" id="settings">...</div> 





</div> 
Make: Demo Stage Saturday 
Ed ieniCad 10:30 AM - 11:00 AM 
ucation Cafe Hacking Kits with Spikenzie Labs - 


Make Demo Stage SpikenzieLabs 

Spikenzie Labs makes well designed 
Arduino based kits. Join them as they 
show you how to create a drum kit from 
found objects and how to hack their 
new Solder: Time ll watch. 


Make: Workshop 


Circus Warehouse 


Zone A Popup 





Performances & Attractions 


Great Hall 11:00 AM - 11:30 AM 
Make: Electronics - Meet the Man 
Coke Zero & Mentos Stage Make Demo Stage ^ Behind the Book! - Charles Platt 
ec am Make: Electronics is a classic. It's the 
Make: c i 
pions -~ ; book that Tom lgoe (Arduino team 











4-4; 可 切换 的 标签 页 
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4.6.1 用 法 

要 在 页 面 中 局 用 标签 页 ， 可 以 使 用 Bootstrap 的 Data API， 也 可 以 直 
接 使 用 JavaScript。 使 用 Data API 的 情况 下 ， 需 要 给 链接 添加 data- 
toggle 属性 ， 然 后 就 可 以 按照 链接 的 href JETE, Wiii .tab-pane 类 
和 相关 ID 的 元 素 。 此 外 ， 用 data-target="" 取代 href="#" 也 可 以 实 
现 同样 的 功能 。 


以 下 是 通过 JavaScript 激 话 标签 页 的 代码 : 


$('#myTab a').click(function (e) 1 
e.preventDefault(); 
S(this).tab('show'); 

}) 


以 下 是 切换 到 个 别 标 签 页 的 不 同方 式 : 


$('#myTab a[href="#profile"]').tab('show'); // 按照 名 称 选 择 标签 页 
$('#myTab a:first').tab('show'); // 选择 第 一 个 标签 页 

$('#myTab a:last').tab('show'); // 选择 最 后 一 个 标签 页 

$('#myTab li:eq(2) a').tab('show'); // 选择 第 三 个 标签 页 ( 索 310 为 第 一 个 ) 


4.6.2 ”事件 
标签 页 有 两 个 事件 ， 如 表 4-5 所 示 。 


表 4-5 可 切换 的 标签 页 事件 
事件 说 明 
show 在 标签 显示 但 显示 完 之 前 触发 。 使 用 event.target fll event.relatedTarget 
可 以 取得 当前 和 之 前 活动 的 标签 页 
shown ”在 标签 显示 且 显 示 完 之 后 触发 。 使 用 event.target 和 event.relatedTarget 
可 以 取得 当前 和 之 前 活动 的 标签 页 





























以 下 是 使 用 shown 事件 的 例子 : 


S('a[data-toggle-"tab"]').on('shown', function (e) { 
e.target // 当前 活动 的 标签 页 
e.relatedTarget // 之 前 活动 标签 页 

F) 





要 了 解 .on 方法 的 细节 ， 请 参考 jQuery 的 网 站 (http://api.jquery. 


com/on/), 


4.7 ”提示 条 


提示 条 ( 见 图 4-5) 可 以 用 来 给 出 链接 说 明 或 (与 标签 连用 ) 给 出 缩 
写 词 的 的 全 称 。 这 个 插件 最 初 的 原型 是 Jason Frame 的 jQuery.tipsy 插 
件 。 但 目前 这 个 提示 条 利用 Bootstrap JavaScript API 可 以 不 使 用 
片 ， 而 且 有 CSS 动画。 








Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left 


Tooltip on bottom 











4-5; 提示 条 的 位 置 


4.7.1 用 法 

给 «a» JCLR s Jl rele" tooltip" 就 可 以 添加 提示 条 ，<a> CAH title 
属性 值 就 是 提示 条 的 内 容 。 下 面 两 个 例子 分 别 使 用 Bootstrap Data API 
和 JavaScript 来 创建 提示 条 : 


«a href="#" rel="tooltip" title-"This is the tooltip">Tooltip Example</a> 
$s('#example').tooltip(options) 


4.7.2 选项 

与 其 他 插件 一 样 ， 提 示 条 也 可 以 通过 Data API 或 JavaScript 来 设置 。 
只 不 过 在 使 用 数据 属性 时 ， 选 项 名 称 前 面 要 加 上 data-， 比 如 title 3l 
要 变 成 data-title ( 见 表 4-6)。 
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表 4-6 “提示 条 选项 


名 称 类 型 默认 值 
animation Boolean true 
html Boolean false 


placement String | Function 'top' 


selector String false 

title String | Function '' 

trigger String "hover focus' 
delay Number | Object 0 

container String false 


4.7.3 万 法 

以 下 是 与 提示 条 相关 的 方法 。 

1. 选项 

给 一 组 元 素 添 加 提示 条 : 
$().tooltip(options) 

2. 显示 

显示 元 素 的 提示 条 : 


S( 'telement').tooltip('show') 


说 BH 

为 提示 条 应 用 CSS 的 淡 入 淡出 过 湾 
提示 条 支持 插入 HIML。 如 果 值 为 faLse， 
则 会 使 用 jQuery 的 text 方法 。 如 果 担 心 
XSS 攻击 ， 那 就 使 用 文本 吧 
设置 提示 条 的 位 置 : top | bottom | Left | 
right 

如 有 果 提 供 了 选择 符 ， 则 将 提示 条 委托 给 指 
定 的 目标 

如 果 title 属性 不 存在 ， 则 使 用 这 个 默认 值 
设置 如 何 触发 提示 条 : click | hover | focus 
| manual。 可 以 传 入 多 个 触发 方式 ， 以 空 
格 分 隔 即 可 

延迟 显示 和 隐藏 提示 条 的 时 间 (毫秒) 一 一 
手动 触发 提示 条 时 无 效 

如 有 果 只 指定 一 个 数值 ， 则 隐藏 和 显示 都 使 
用 该 数值 

对 象 的 结构 为 delay: ( show: 500, hide: 
100 } 


将 提示 条 附加 到 特定 元 素 ， 如 container: 
' body' 








3. 隐藏 


PEIRIER HI EIS AR : 


S('Zelement').tooltip('hide') 


4. 开关 
开关 元 素 的 提示 条 : 


$('#element').tooltip('toggle') 


5. 销毁 
BSEC EH EE JUS BJ Tie 7 IN ARS : 


S('stelement').tooltip('destroy') 


4.8 弹出 层 





弹出 层 〈 见 图 4-6) 与 提示 条 非常 相似 ， 不 仅 能 显示 内 容 ， 还 可 以 显 
示 标 题 。 把 光标 悬 停 到 元 素 上 ， 束 可 以 微笑 阐 出 层 。 弹 出 层 的 内 容 可 
以 使 用 Bootstrap Data API 来 鞭 充 ， 而 且 要 求 元 素 本 身 包含 提示 条 。 
弹出 层 的 位 置 通 过 data-placement 属性 来 指定 ， 包 括 top. right. 


bottom 和 left, 





Popover top 


Bacon ipsum dolor sit amet jerky 
flank andouille, ham hock spare 
ribs pork loin jowl meatloaf 
kielbasa tail biltong pork boudin. 





Popover bottom 


Bacon ipsum dolor sit amet jerky 
flank andouille, ham hock spare 
ribs pork loin jowl meatloaf 
kielbasa tail biltong pork boudin. 


Popover right 


Bacon ipsum dolor sit amet jerky 
flank andouille, ham hock spare 
ribs pork loin jowl meatloaf 
kielbasa tail biltong pork boudin. 





Popover left 


Bacon ipsum dolor sit amet jerky 
flank andouille, ham hock spare 
ribs pork loin jowl meatloaf 
kielbasa tail biltong pork boudin. 

















图 4-6; 弹出 层 的 位 置 
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以 下 是 创建 弹出 层 的 代码 : 


«a href="#" class-"btn" rel="popover" title-"Using Popover" 
data-content-"Just add content to the data-content attribute."»Click Me!</a> 


4.8.1 用 法 
要 通过 JavaScript 打开 弹出 层 ， 使 用 .popover() 函数 ， 传 人 需要 的 选项 : 


S('Zexample').popover(options) 


4.8.2 选项 


所 有 选项 都 可 以 通过 Bootstrap Data API 设置， 当然 也 可 以 通过 
JavaScript 设置 (JLK 4-7), 
表 4-7 ”弹出 层 的 选项 


名 称 类 型 默认 值 说 明 
animation Boolean true 为 弹出 层 应 用 CSS 的 淡 入 淡出 过 湾 
html Boolean false 弹出 层 支持 插入 HTML, ZR [8 false. 


则 会 使 用 jQuery BJ text 方法 。 如 果 担 心 
XSS 攻击 ， 那 就 使 用 文本 吧 


placement String | Function ' top' 设置 弹出 层 的 位 置 top | bottom | 
left | icd 

selector String false 如 采 提 供 了 选择 符 ， 则 将 弹出 层 委 托 给 
KERI H ER 

trigger String 'hover focus' 设置 如 何 触 发 弹出 层 ; click | hover | 


focus | manual。 可 以 传 入 多 个 触发 方 
式 ， 以 空格 分 隔 即 可 








title String | Function '' WMR title 属性 不 存在 ， 则 使 用 这 个 黑 
认 值 

content String | Function '' 如 果 data-content 属性 不 存在 ， 则 使 用 
文 个 默认 值 

delay Number | Object 0 延迟 显示 和 隐藏 弹出 层 的 时 间 (SEP) 一 一 
手动 触发 弹出 层 时 无 效 
如 采 只 指定 一 个 数值 ， 则 隐藏 和 显示 都 
使 用 该 数值 
对 象 的 结构 为 delay: ( show: 500, hide: 
100 } 

container String false 将 弹出 层 附 加 到 特定 元 素 ， 如 container: 
' body' 





4.8.3 万 法 
以 下 是 与 弹出 层 相关 的 方法 。 


1. 选项 
给 一 组 元 到 添加 弹出 层 : 





$().popover (options) 
2. 显示 
PRLR AHR: 
$('#element').popover('show') 
3. 隐藏 
隐 震 元 素 的 弹出 层 : 


$('#element').popover('hide') 


4. 开关 
开关 元 素 的 弹出 层 : 


S('«telement').popover('toggle') 


5. 销毁 
ER JSCAT- EH Sx JUR JOE IR I: 


S('«telement').popover('destroy') 


4.9 警示 框 


使 用 Data API 很 容易 给 警示 框 添加 关闭 功能 〈( 见 图 4-7), 
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Oh snap! You got an error! 
This is a critcal error, one that we cannot recover from. Bummer. 


Let's Try Again Report Error 


图 3) 4- 7 : 错误 警示 消息 











4.9.1 用 法 
使 用 JavaScript 调用 .alert() 方法 ， 或 者 通过 在 链接 或 按钮 中 添加 数 
据 属 性 都 可 以 让 警示 框 具 有 关闭 功能 。 


在 JavaScript 中 要 这 样 做 : 





$S(".alert").alert() 
通过 Data API 要 这 样 做 : 


«a class-"close" data-dismiss-"alert" href="#">&times;</a> 


4.9.2 关闭 方法 
要 让 所 有 警示 框 都 具有 关闭 功能 ， 传 入 如 下 选项 。 要 让 警示 框 以 动画 
方式 关闭 ， 则 要 给 它们 应 用 .fade 和 .in 类 。 


S(".alert").alert('close') 


4.9.3 事件 
RIEA PN SEDE, Axe 4-8 所 示 。 


表 4-8 ZU WMENXBSZ 
事 件 oW o HB 
close 这 个 事件 在 实例 方法 close 被 调用 后 立即 触发 
closed 这 个 事件 在 警示 框 被 关闭 (CSS 过渡 完 成 ) 后 触发 





例如 ， 要 在 堂 示 框 关 闭 后 执行 操作 ， 可 以 这 样 写 代码 : 
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$('#my-alert').bind('closed', function () { 
// WATR RRE 
}) 


4.10 -— 


第 3 草 介 绍 过 按钮 。 在 Bootstrap 中 ， 可 以 让 按钮 像 链接 ， 或 者 像 表 
UM. 通过 这 个 插件 可 以 为 按钮 赋予 交互 功能 ， 比 如 显示 加 载 
状态 或 组 成 工具 条 似 的 按钮 组 。 


4.10.1 加 载 状态 


要 让 按钮 显示 加 载 状态 (ULÉ 4-8)， 只 要 给 按钮 添加 data-loading- 
text="Loading..." 属性 即 可 : 





«button type="button" class="btn btn-primary" data-loading-text-"Loading..."» 
Submit!</button> 


RRE, ARRI .disabled 类 ， ， 不 再 啊 应 单 击 。 





4-8: 加 载 按钮 











4.10.2 单 选 开 天 
单 击 带 有 data-toggle="button" 属性 的 按钮 ( 见 图 4-9), 会 给 它 添 
加 .active 2E; 


«button type-"button" class="btn btn-primary" data-toggle="button">Toggle 
«[button» 





Single Toggle 














4-9: 开关 按钮 
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4.10.3 复 选 按钮 


按钮 也 可 以 像 复 选 框 一 样 ( 见 图 4-10) ， 让 用 户 从 按钮 组 中 选择 多 个 
按钮 。 要 添加 这 个 功能 ， 给 .btn-group i437] data-toggle- "buttons- 
checkbox" 属性 : 





«div class="btn-group" data-toggle="buttons-checkbox"> 
<button type="button" class="btn btn-primary">Left</button> 
<button type="button" class="btn btn-primary">Middle</button> 
<button type="button" class="btn btn-primary">Right</button> 
</div> 





Left Middle Right 











S 4-10: 复 选 按钮 


vH- nn 
4.10.4 单 选 按钮 
单 选 按钮 〈 见 图 4-11) 与 复 选 按钮 的 区 别 就 是 不 允许 选择 多 个 ， 即 
每 次 只 能 选择 按钮 组 中 的 一 个 。 要 在 按钮 组 中 添加 单 选 按钮 ， 需 
给 .btn-group 添加 data-toggle="buttons-radio" TE: 
«div class-"btn-group" data-toggle="buttons-radio"> 
«button type="button" class="btn btn-primary'"»Left«/button» 
«button type="button" class="btn btn-primary"»Middle«/button» 


«button type="button" class="btn btn-primary"»Right«/button» 
</div> 


Left Middle Right 





图 4-11: 单 选 按钮 


4.10.5 用 法 


可 以 对 任何 类 和 了 ID 调用 .button() 方法 。 比 如， 要 通过 JavaScript 局 
用 .nav-tabs 中 的 按钮 ， 可 以 运行 以 下 代码 . 


$('.nav-tabs').button() 





4.10.6 万 法 
以 下 是 与 按钮 相关 的 方法 调用 。 


开关 
切换 状态 ， 让 人 感觉 按 钮 被 按 下 了 : 


$().button('toggle') 


2. 加载 


加 载 过 程 中 ， 按 钮 是 禁用 的 ， 显 示 的 文本 会 变 成 data-loading-text 
属性 的 值 : 


«button type="button" class="btn" data-loading-text="loading stuff..." > 
</button> 


3. EB 
重 置 按钮 状 在， 显示 原来 的 文本 。 适 合 让 按钮 显示 最 初 状 态 的 情况 


$().button('reset') 


4. 字符 串 
传 入 这 个 参数 可 以 让 按钮 显示 字符 串 : 





S$().button('string') 
要 重 置 按钮 状态 ， 显 示 新 内 容 ， 可 以 这 样 : 


«button type="button" class="btn" data-complete-text="finished!" >...</button> 
«script» 


S('.btn').button('complete') 
</script> 


4.11 dJr&dE 


这 个 插件 简化 了 折 又 框 的 创建 ( 见 图 4-12), Zcieze GU E Dr SN SEL 
还 是 内 容 区 ， 都 可 以 通过 折 垂 框 的 选项 进行 设置 。 
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Collapsible Group Item #1 


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt 
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin 
coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes 
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings 
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't 
heard of them accusamus labore sustainable VHS. 


Collapsible Group Item #2 


Collapsible Group Item #3 











4-12: H&E 
以 下 代码 用 于 创建 可 折合 的 区 域 : 


«div class-"accordion" id="accordion2"> 
«div class-"accordion-group"» 
«div class-"accordion-heading'"» 
«a class-"accordion-toggle" data-toggle-"collapse" data-parent- 
"Xaccordion2" href="#collapseOne"> 
Collapsible Group Item #1 
</a> 
</div> 
«div id="collapseOne" class="accordion-body collapse in"> 
<div class="accordion-inner"> 
Anim pariatur cliche... 
</div> 
</div> 
</div> 
«div class="accordion-group"> 
<div class="accordion-heading"> 
<a class="accordion-toggle" data-toggle="collapse" data-parent= 
"#accordion2" href="#collapseTwo"> 
Collapsible Group Item #2 
</a> 
</div> 
<div id="collapseTwo" class="accordion-body collapse"> 
<div class="accordion-inner"> 
Anim pariatur cliche... 
</div> 
</div> 
</div> 
</div> 





可 以 使 用 数据 属性 让 所 有 内 容 都 可 以 折 和 县 : 


«button type="button" class="btn btn-danger" data-toggle-"collapse" 
data-target-"Zdemo"» 

simple collapsible 
«[button» 


«div id-"demo" class-"collapse in"> ... </div> 


4.11.1 用 法 


1. 数据 属性 方式 

与 使 用 Data API 的 其 他 插件 一 样 ， 一 切 都 可 以 在 标记 中 搞定 。 给 一 个 
元 又 添加 data-toggle-"collapse" 和 data-target RTE, WEBES H tE 
制 相 应 的 可 折 又 元素。 其 中 ，data-target 属性 的 值 可 以 是 表示 可 折 登 
JU3RHJ CSS 选择 符 。 另 外 ， 要 给 可 折 登 元 素 添 加 .collapse 类 。 如 末 
默认 想 打 开 哪 个 元 素 ， 就 再 给 它 添 加 一 个 .in 类 。 


要 指定 类 似 折 登 组 的 元 素 ， 为 每 个 可 折 苔 元 素 添 加 data-parent- 


"#selector". 








2. JavaScript H I} 
通过 下 面 的 JavaScript 77 i48 RT LAE A UT E : 


$(".collapse").collapse() 


4.11.2 选项 


表 4-9 列 出 了 折合 框 相关 有 的 选项 ， 可 以 通过 数据 属性 或 JavaScript 来 
设置 这 些 选 项 。 


表 4-9 HAIEN 

名 称 类 型 默认 值 说 HH 

parent 选择 符 false 如 末 指 定 了 选择 符 ， 则 所 有 位 于 这 个 指定 的 父 
元 素 乙 下 的 可 折 和 县 元 素 都 会 在 父 元 素 可 见 时 折 
AER (RERI EHE) 

toggle Boolean true 切换 可 折 革 元素 的 状态 
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4.11.3 方法 

以 下 是 与 可 折 有 登 元 素 相 关 的 方法 调用 。 

1. 选项 

把 元 素 激活 为 可 折 芭 元 素 ， 接 受 可 选 的 选项 对 象 : 


.Collapse(options) 


2. 开关 
切换 可 折合 元 素 的 状态 : 
$('#myCollapsible').collapse({ 


toggle: false 


}) 
.COLLapse( 'toggle') 


3. 显示 
显示 可 折合 元 素 : 


.COLLapse( ' show ' ) 


4. 隐藏 
B ae, n] TR JUR: 


.Collapse('hide') 


4.11.4 事件 
H[ JT TCR THOSHUSEDEAH 4 Ir, IUK 4-10, 


X4-10 HEERKE 
事 件 Wi 有明 








Show 在 实例 方法 show 被 调用 后 触发 

shown 在 可 折合 元 素 对 用 户 完全 可 见 (CSS 过 渡 完 成 ) 后 触发 
hide 在 实例 方法 hide 被 调用 后 触发 

hidden 在 可 折 苔 元 素 对 用 户 完全 不 可 见 (CSS ERER) 后 触发 





在 «div» 折合 之 后 ， 可 以 使 用 以 下 代码 执行 其 他 操作 : 


$('#myCollapsible').on('hidden', function () { 
// 执行 其 他 操作 ……… 
}) 


4.12 ”传送 市 


Bootstrap 的 传送 带 (JLA 4-13) 是 一 个 灵活 的 、 响 应 式 的 幻灯 片 切换 
插件 。 除 可 以 具有 啊 应 性 ， 其 内 容 也 可 以 古 图 片 、 子 框架 、 视 频 ， 或 
者 其 他 任何 内 容 。 





Third Thumbnail label 


Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at 
eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 














图 4-13: 传送 带 
以 下 是 实现 Bootstrap (RIX t 8 fd; 


«div id-"myCarousel" class="carousel slide"> 
«!-- Carousel items --> 
«div class-"carousel-inner"'» 
«div class-"active item">...</div> 
«div class-"item"»...«/div» 
«div class="item">...</div> 
</div> 
<!-- Carousel nav --> 
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«a class-"carousel-control left" hrefz"4myCarousel" data-slide-"prev"» 
&lsaquo; </a> 
«a class="carousel-control right" href="#myCarousel" data-slide="next"> 
&rsaquo; </a> 
</div> 


4.12.1 用 法 


要 实现 传送 带 效 果 ， 需 要 添加 上 面 所 示 的 标记 ， 不 用 数据 属性 ， 只 
添加 相应 的 类 即 可 。 在 JavaScript 中 ， 可 以 像 下 面 这 样 手动 调用 传送 
市 插件 : 


$('.carousel').carousel() 


4.12.2. 选项 

选项 可 以 通过 数据 属性 设置 ， 也 可 以 通过 JavaScript A. X 4-11 列 
出 了 传送 市 相关 的 插件 。 

表 4-11 传送 带 选 项 

名 称 类 型 默认 值 说 W 

interval number 5000 每 次 自动 切换 间隔 的 时 间 ， 如 末 未 指定 则 使 用 默认 时 间 


pause string "hover" 在 mouseenter 时 和 暂停 轮 播 ， 在 mouseleave 时 恢复 


4.12.3 万 法 
以 下 是 与 传送 带 插 件 相关 的 方法 调用 。 





1. 选项 
以 可 选 的 选项 对 象 彻 始 化 并 局 动 传送 市 





$('.carousel').carousel(( 
interval: 2000 
J) 





2. 和 轮 播 
从 左 到 右 轮 播 传 送 带 中 的 项 : 


.carousel('cycle') 
3. 暂停 
暂停 传送 带 的 轮 播 : 
.carousel('pause') 
4. 数值 
把 传送 带 切换 到 特定 的 项 〈 类 似 数组 ， 基 于 0 计数 ): 
.carousel('number ') 
5. 前 一 项 
切换 到 前 一 项 : 
.carousel('prev') 
6. 后 一 项 
切换 到 后 一 项 : 


.carousel('next') 


4.12.4 事件 
K 4-12 列 出 了 与 传送 市 相关 的 事件 。 


表 4-12 ”传送带 相 关 的 事件 
事 dk 说 明 


slide 在 实例 方法 slide 被 调用 后 触发 
slid 在 传送 币 完 成 切换 动画 之 后 触发 
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4.13 ”预先 输入 


用 这 个 插件 可 以 创建 带 预 先 输入 的 表单 ( 见 图 4-14)。 举 个 例子 ， 可 
以 在 “ 州 ”这 个 字段 中 预先 加 载 所 有 州 名 ， 或 者 使 用 JavaScript 通过 
AJAX 调用 来 搜索 结果 。 





ECT Pig kielbasa chicken, short ribs andouille filet mignon pork belly sp 
S ball tip hamburger pastrami pig turducken. Tongue ground round sh 
North Carolina ey jerky tenderloin cow t-bone. 


South Carolina 











4-14: 预先 输入 


4.13.1 用 法 


使 用 Data API， 可 以 通过 data-source 属性 添加 预先 输入 的 内 容 。 内 
容 的 格式 可 以 是 JSON ZH, d nf Uo B ESL: 


<input 

type=" text" 

class="span3" 

data-provide="typeahead" 

data-items="4" 

data-source="[ 
'Alabama', 
'Alaska', 
'"Arizona', 
'Arkansas', 
'California', 


外 


> 


要 通过 JavaScript 直接 调用 ， 使 用 如 下 代码 : 


S('.typeahead' ) .typeahead() 





4.13.2 


选项 


表 4-13 列 出 了 与 预先 输入 相关 的 选项 。 
表 4-13 ”预先 输入 相关 的 选项 


名 称 


source 


items 
minLength 


matcher 


sorter 


updater 


highlighter 


4.14 


类 型 


Array, Function 


Number 
Number 


Function 


Function 


Function 


Function 


HR 


默认 值 
[] 


区 分 大 小 写 
不 区 分 大 小 写 


返回 选中 项 


突出 显示 所 有 
默认 匹配 项 


说 HH 

要 查询 的 数据 源 。 可 以 是 字符 串 数 组 ， 
也 可 以 是 一 个 畏 数 。 如 采 是 国 数 ， 则 
接受 两 个 参数 ， 一 个 是 输入 字段 中 要 
查询 的 值 query， 男 一 个 是 回调 函数 
process。 畏 数 可 以 直接 返回 数据 产 ， 
实现 同步 查询 ， 也 可 以 通过 process 回 
调 函 数 进行 异步 查询 

下 拉 选 项 列表 中 最 多 显示 儿 项 

触发 目 动 完 成 建议 最 少 需要 几 个 字符 








写 用 于 检测 碍 询 古 否 找到 了 匹配 项 ， 接 受 


一 个 参数 item， 用 于 对 比 查 询 。 要 访问 
当前 查询 ， 使 用 this .query。 如 果 找 到 
匹配 项 ， 返 回 true 

用 于 排序 自动 完成 建议 的 方法 ， 接 受 一 
个 参数 items， 作 用 域 为 当前 的 预先 输 
入 元 素 。 要 访问 当前 查询 ， 使 用 this. 
query 

用 于 返回 选中 项 的 方法 ， 接 受 一 个 参数 
item， 作 用 域 为 当前 的 预先 输入 元 素 
用 于 突出 显示 自动 完成 结果 的 方法 ， 接 
受 一 个 参数 item， 作 用 域 为 当前 的 预先 
输入 元 素 。 应 该 返回 HTML 











HZ (affix) 插件 会 让 一 个 <div> 粘 附 在 页 面 上 某 个 位 置 。 开 始 时 ， 








粘 条 出 现在 页 面 的 茶 个 位 置 ， 但 当 页 面 深 动 一 定 距离 时 ， 它 就 固定 不 
af. JEN Ap Reg IER. 








Bootstrap 支 持 的 JavaScript 插 件 | 109 


4.14.1 用 法 


要 实现 粘 条 插件 ， 可 以 使 用 数据 属性 ， 也 可 以 使 用 JavaScript。 记 住 ， 
必须 定位 相应 的 元 素 ， 以 便 它 能 粘 附 在 页 面 上 上。 定位 是 通过 data- 
spy 属性 控制 的 ， 这 个 属性 的 值 可 以 是 : affix、affix-top 或 affix- 
bottom。 然 后 ， 再 通过 data-offset 来 设置 深 动 中 离 。 


«div data-spy="affix" data-offset-top="200"> 


</div> 


4.14.2 选项 
表 4-14 列 出 了 粘 条 相关 的 选项 。 


表 4-14 ” 粘 条 相关 的 选项 

名 称 类 型 默认 值 说 明 

offset ^ Number | Function | Object 10 LEER b ER ERES fi Ee BE a A R R Ls 
如 果 只 提供 了 一 个 数值 ， 则 将 该 数值 
[5] EF P Hi 26 E; fu7c fu. DES DUI E 
一 个 方向 ， 需 要 提供 一 个 对 象 ， 如 : 
offset: ( x: 10 }。 在 需要 动态 设置 
偏 移 量 时 ， 可 以 提供 一 个 函数 (适合 
响应 式 .设计 ) 
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实际 使 用 Bootstrap 


5.1 GitHubInH 


与 众多 优秀 开源 项 目 一 样 ，Bootstrap 也 不 仅仅 是 几 位 核心 开发 人 员 的 
成 果 ， 而 是 整个 开发 社区 的 功劳 。GitHub 是 托管 项 目的 一 个 代码 库 ， 
在 本 书写 作 时 ，Bootstrap 是 关注 度 最 高 的 项 目 。 超 过 50000 ME AE, 
16000 多 个 分 支 ， 充 分 表明 这 个 项 目 有 多 么 活跃 。 正 如 我 们 在 第 1 章 
提 到 的 ， 要 使 用 Bootstrap， 可 以 在 它 的 站 点 上 下 载 ， 也 可 以 使 用 Git 
TFR. 


Git 是 一 个 自由 的 开源 版 本 控制 系统 。 包 括 Bootstrap 在 内 的 大 量 项 目 
都 使 用 GitHub 做 项 目 管理 ， 而 GitHub 就 是 基于 Git 的 一 个 在 线 代 码 
库 。 要 用 Git 下 载 Bootstrap， 在 命令 行 执行 如 下 命令 : 





$ git clone https://github.com/twitter/bootstrap.git 


XX FE sU PE Bootstrap 将 得 到 所 有 文件 ， 不 仅仅 是 CSS/JavaScript， 还 有 
文档 和 针对 动态 JavaScript 元 素 的 LESS 文件 。 


如 果 你 愿意 ， 可 以 使 用 LESS 文件 编译 自己 的 Bootstrap 版 本 ， 实 现 对 
功能 的 定制 。 


5.2 定制 Bootstrap 


可 以 下 载 全 部 源 代 码 ， 也 可 以 从 颜色 、 大 小 或 插件 等 几 个 方面 进行 定 
制 ， 这 些 都 可 以 通过 Bootstrap 网 站 做 到 。 


在 定制 Bootstrap 的 页 面 上 ( 见 图 5-1)， 可 以 选择 包含 哪些 组 件 。 比 
如 ， 可 以 不 选择 啊 应 性 功能 ， 或 者 不 选择 与 既 有 按钮 冲突 的 按钮 相关 
的 类 。 当 然 ，jQuery 插件 也 是 可 选 的 。 假 如 你 知道 自己 不 需要 模 态 框 
或 传送 带 插件 ， 那 束 不 要 包 仿 它们， 这 样 下 载 的 文件 会 更 小 。 


最 后 ， 还 可 以 配置 LESS 变量 。 包 括 列 数 、 颜 色 ， 等 等 都 可 以 修改 。 
经 过 一 番 定 制 ， 你 一 定 可 以 得 到 适合 目 己 需要 的 版 本 。 
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Scaffolding Typography Form states & alerts 
GbodyBackground GsansFontFamily GwarningText 
white 'Helvet Neue ' Hel t A 300853 

QtextColor GserifFontFamily QwamingBackground 
QmonoFontFamily GerrorText 

Links Menlo, Monaco, 'Courier New', mon itb94a48 

GlinkColor GbaseFontSize GerrorBackground 

GlinkColorHover GbaseFontFamily GsuccessText 
GbaseLineHeight GsuccessBackground 

Colors opx #dff0d8 

@bl 

Jolu @altFontFamily @infoText 








5-1: 定制 Bootstrap 


5.2.1 使 用 LESS 


在 Bootstrap 中 使 用 LESS 有 几 种 不 同 的 方式 〈 见 图 5-2). Æ — Ppi fj 
单 ， 就 是 使 用 CodeKit ( 见 图 5-3) 或 SimpLESS 之 类 的 预 处 理 器 。 利 用 
这 些 工 具 可 以 查看 特定 的 文件 和 文件 夹 。 在 保存 某 些 文件 时 ， 它 们 会 帮 
你 构建 主 CSS 文件 。 除 了 使 用 传统 的 CSS 技术 ， 还 可 以 使 用 混入 、 略 
数 等 高 级 功能 ， 以 及 通过 修改 某 些 变量 达到 改变 站 点 外 观 的 目的 。 











eo0 = popovers.less — bootstrap 
200px-mir 


: QzindexPopover; 


; // Reset given new insertion method 
: @popoverBackground; 


( ) ; 
(6px); 
(ð 5px 10px rgba(0,0,0,.2)); 


// Overrides for proper insertion 
: ; 


// Offset the popover to account for the popover arrow 
&. : ; 


& { 
& { 
& { 











5-2: 通过 LESS 定制 Bootstrap 
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eoe Codekit wa 
Files ( ) 
PROJECTS Styles Scripts Pages Images Less 
g sn 加 E /docs/base-css.html [ Do not compile directly 
辐 maker-cam| v 
— " e /docs/components.html 
e t 
QJ wentorMakersp... V E3 /docs/customize.html 
O venormakoso.. E jaocs extend htm! ro—— 
E: | [docs/getting-started.html @ Enforce strict imports 
FRAMEWORKS -— | Run Bless on the CSS file 
( 2 /docs/index.html 
[ ; [docs/javascript.html 
= (s variables.less 
( E /docs/scaffolding.html (a. Sixine jac 
/img/glyphicons-halflings-white.png (< responsive-utilities.less 
/img/glyphicons-halflings.png f4 responsive-1200px-min.less 
/js/bootstrap-affix.js 
/js/bootstrap-alert.js 
/js/bootstrap-button.js 
/js/bootstrap-carousel.js 
xu " /js/bootstrap-collapse.js Compile 
L. Å= 








5-3; 用 CodeKit &3 Bootstrap 代码 


LESS 是 用 于 编写 CSS HIREAK, BLETE., KAAN 
A DRE. Bootstrap 的 /less/ 文件 夹 里 包含 一 些 LESS 文件 。 如 条 想 


设置 全 局 变量 , 需要 关注 variables.less 和 mixins.less, 





在 variables.less 中 ， 可 以 找到 Bootstrap 的 所 有 全 局 变量 。 以 修改 所 
有 和 链接 颜色 为 例 ， 只 要 修改 LESS 变量 ， 重 新 编译 ， 就 可 以 了 。 
/* 修改 前 */ 


alinkColor: 408c ; 
alinkColorHover: darken(QGlinkColor, 15%); 


/* 修改 后 */ 
alinkColor: #7d00cc ; 
@linkColorHover: darken(@linkColor, 15%); 


这 样 ， 所 有 链接 就 会 变 成 紫色 ， 网 站 中 所 有 按钮 及 其 他 引用 etinkcolor 
的 界面 元 和 素 都 会 得 到 更 新 。 


FRR, TEIRELERARARAEHPLESS. 53k. RE CSS 都 很 长 
时 间 了 ， 我 不 想 改变 。 可 LESS WARE DARKE, fe ERAI 
为 呢 ? 
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5.2.2 Snippets 插 件 


要 想 快速 地 基于 Bootstrap 写 个 网 站 ， 建 议 使 用 Sublime Text 2 和 
Bootstrap Snippets 插件 ( 见 图 5-4), ， 后 者 下 载 地 址 为 : https://github.com/ 
devtellect/sublime-twitter-bootstrap-Snippets/， 来 目 DEVtellect 。 这 个 


插件 可 以 让 你 使 用 快捷 方式 添加 任意 组 件 。 


€, base-css.html — bootstrap 


x mixins.less 


< 2 > 
<hħ1>Typography</^1> boots 
</div> Snippet: Bootstrap pagination 
- >Headinc 5nippet: Bootstrap thumbnails 
< mar HTML headings, <c¢ Snippet: Bootstrap toolbar 


<ħi>h1. Heading 1</h1> 

<h2>h2. Heading 2</h2> 

<h3>h3. Heading 3</h3> 

«^4»h4. Heading 4</h4> Snippet: Bootstrap carousel 
> 
> 


Snippet: Bootstrap starter 
Snippet: Bootstrap accordion 


«^5»h5. Heading 5«/ 
<nh5>zh6，Heading 6</ 
«/div» Snippet: Bootstrap tooltips 


Snippet: Bootstrap modal 


一 »Body « SnNippet: Bootstrap default blockquote 


* >Bootstrap， s global def Snippet: Bootstrap danger button 
>. This is applied x = = 

receive a bottom margin ¢ Snippet: Boot trap info button 

< E | . RAA 1 
alta quis rios ec Snippet: Bootstrap inverse button 
ridiculus mus. Nullam i Snippet: Bootstrap large button 
<p>Cum sociis natoque p : npe ini 
auctor fringilla. Duis Snippet: Bootstrap mini button 


ullamcorper nulla non n Snippet: Bootstrap primary button 

<p>Maecenas sed diam ec - N 

mollis, est non commodc Snippet: Bootstrap small button 
«/ > 


= > p 


<h3>Lead body copy</h3> 
<D>Make a paragraph stand out by adding < >. lead</ >.</0> 
= > 


= >Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non 
= > p class=" lead" ecc /p «/ > 


<hħ3>Built with Less</h3> 





5-4; Bootstrap Snippets 插件 


要 安装 这 个 插件 ， 需 要 把 其 代码 克隆 到 你 的 packages 文件 夹 里 : 
git clone git@github.com:devtellect/sublime-twitter-bootstrap-snippets.git 


^b iE T BS CAS E i IUE XARA AE Fr AID BE o 


5.2.3 ”Photoshop 模 板 


除了 文本 卢 段 ， 还 有 一 些 针 对 Bootstrap 7:38 Vx TT HJ Photoshop 文件 。 我 
比较 喜欢 Repix Design 的 设计 (http://gui.repixdesign.com/fbootstrap) , 
5-5 展示 了 它们 的 网 站 。 





实际 使 用 Bootstrap | 115 















RepixDesign * Bootstra 


Free and flexible GUI PSD with popular user interface component 


E 


and elements to create a Bootstrap website mockup. 


More? RepixDesign.com 


e» iL T d v^ 


Complete colorization Seperate PSD layers Vector based elements Ultra high resolution 
Using Photoshop, you can easily All the elements you can see, and the Most elements you see, accept the The basic screen resolutions are 
customize the colors of various examples are completely editable. So — pixelperfect element, are created with — 1024x768 pixels / 326 PPI. This 
elements of this graphic user you can create your own buttons, vectors. This means that they are means that all elements can be 
interface, without to be a Photoshop sliders, forms, etc. You can also completely scalable and suitable for scaled almost any size you need, 
master. copy/paste all layerstyles. any screen resolution. 

m =  Usethis PSD to design your Bootstrap website. 

; Hope you can use it, RepixDesign.com EN e» » 











5-5; Repix design 
这 个 网 站 中 的 Photoshop 模板 具有 如 下 特点 : 


。 可 调整 的 颜色 
。 独立 的 图 层 
。 基于 矢量 


模板 PSD 文件 是 免费 的 ， 但 要 求 使 用 者 在 Twitter 上 转发 。 这 种 免费 
转发 的 模式 在 开源 编程 领域 渐 成 气候 。 


5.2.4 主题 


如 果 你 安装 了 位 单 的 Bootstrap， 但 后 来 想 添 加 一 些 装 饰 ， 我 同 你 推荐 
两 个 Bootstrap 主题 网 站 ， 其 中 的 主题 有 的 免费 ， 有 的 收费 : 一 个 是 
(Wrap]Bootstrap (https://wrapbootstrap.com/), 5 — ^^ Æ Bootswatch 
(http://bootswatch.com/)。 这 些 主题 都 有 很 多 选项 ， 通 过 它们 一 定 能 
把 你 的 网 站 设计 得 新 闲 别 致 。 
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5.9 ”获得 灵感 


如 果 你 想得到 更 多 灵感 ， 可 以 看 一 看 Built With Bootstrap (http:// 
builtwithbootstrap.com/)， 一 个 由 用 户 提 交 Bootstrap 站 点 截图 的 轻 博 
客 。 浏 览 一 下 那些 使 用 Bootstrap 的 网 站 是 很 有 意思 的 。 








5.4 小 结 


EmA L, Bootstrap 几乎 可 以 适用 于 任何 网 站 。 内 置 啊 应 式 框 架 、 太 
ti HJ JavaScript 插件 、 健 壮 的 界面 组 件 ， 这 些 为 快速 创建 功能 强大 的 
网 站 提供 了 便利 。 过 去 一 年 使 用 Bootstrap 的 经 历 让 我 感觉 非常 好 ， 
希望 这 个 项 目 将 来 会 有 更 大 发 展 。 好 样 的 ， 太 棒 了 ， 我 要 感谢 Jacob 
Thornton 和 Mark Otto 发 起 并 创建 了 这 个 万 能 无 敌 的 项 目 。 
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作者 及 封面 介绍 


4h 
作者 简介 
Jake Spurlock 是 O'Reilly Media 的 开发 者 ， 主 要 开发 MAKE, MAKE 
作为 一 个 DIY 杂志 ， 发 起 了 Maker Faire ( 制 汇 节 ) ， 访 活动 旨 在 教会 
人 们 动手 制作 ， 让 世界 变 得 更 美好 。Jake 是 犹他 州 人 ， 一 年 半 前 搬 到 
T An^ dein o. 


+ 

封面 介绍 

本 书 封面 动物 是 芬兰 马 。 芳 兰 马 是 芝兰 国 马 ， 由 于 这 种 马 能 耕种 、 驾 
车 ， 还 可 供 人 驱 驰 、 消 得 ,而且 具 有 很 高 的 经 济 价值 ， 因 此 世人 美 其 
名 日 “万 能 马 *。 虽 然 这 种 马 在 芬兰 已 经 繁殖 、 演 化 了 几 个 世纪 ， 但 
它们 的 起 源 至 今 仍然 是 个 谜 


务 兰 马 大 部 分 征 栗 神色， 间 杂 极 少 量 轩 色 、 银 色 或 惠 红 色 。1800 年 
代 ， 栗 色 苏 兰 马 大 约 只 占 一 半 ,， 但 经 过 19 世纪 和 20 世纪 不 断 地 优 
选 ， 多 数 其 他 基因 都 被 淘汰 了 。 人 们 都 认为 栗色 是 这 种 马 的 正宗 颜 
色 ， 苍 兰 马 国家 繁育 协会 也 致力 于 消除 “ 非 正 宗 ” 颜 色 。 另 外 ， 大 约 
155 EXPY BBEA LEBAR, HAKTE RERE IR 
5, Wn H-FUS TRIS EK. 

今天 ， 大 多 数 分 兰 马 都 用 于 比赛 以 及 其 他 消 遗 用 途 。20 ahi, 5 
兰 马 一 度 是 赛马 场 上 唯一 的 马 种。 但 此 后 ， 其 他 马 也 加 入 了 赛马 阵 
过 。 这 种 马 也 被 很 多 骑马 学 校 使 用 ， 或 者 用 于 马 疗 法 。 














M» 


M» 
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JavaScript/Web Development 





— 户 手 册 : 设计 响应 式 网 站 


本 书 教 你 怎么 用 Booetstrap 框 架 轻 松 设计 出 “杀手 级 ” 
pg 从 怎么 用 Bootstrap 的 HTML/CSS 工 
有 具 和 现成 模板 构建 页 面 开始 ， 逐 步 保 入 地 竺 握 它 内 置 的 
交互 组 件 和 jQuery 插件 ， 营 第 是 一 行 代码 都 不 用 与 。 


作为 源 自 Twitter 的 一 个 开源 框架 ， 而 且 可 以 从 GitHub 上 
AATF, Bootstrap “aitse” (Mobile First) 
HUE LTRHIE, EFAA Pd A ej. CE N l 
站 。 只 要 稍微 懂 一 些 HTML、CSS 和 JavaScript， 就 可 以 
创建 出 在 桌面 显示 器 、 和 者 能 手机 和 平板 电脑 中 看 起 来 同 
样 完 美的 网 站 或 应 用 。 这 本 书 会 告诉 你 怎么 做 。 


s» 熟悉 Bootstrap 的 文件 结构 、 网 格 系统 和 容器 布局 ， 


s» 学 习 HTML 中 用 于 排版 、 代 码 、 表 格 、 表 单 、 按钮 、 
图 片 以 及 图 标的 元 素 ; 


s 设计 界面 及 其 他 网 页 元 素 ， 比 如 导航 、 面 包 届 ， 以 
及 自 定 义 模 态 窗 口 等 ; 


s ”使 用 jQuery 插件 实现 渐进 的 幻灯 片 、 标 签 页 式 界面 
$n T bx, 


m 在 LESS 文 件 中 修改 布局 栏 数 和 字体 颜色 。 


封面 设计 : Karen Montgomery 张 健 

图 灵 社 区 : www.ituring.com.cn 

新 浪 微 情 ， @ 图 灵 教 育 @ 图 灵 社 区 

反馈 /投稿 /推荐 信箱 : contact@turingbook.com 


[wirt [u] 
热线 ， (010)51095186 转 604 四 
计算 机 /网 站 设计 『 
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kn Jake Spurlockzé — 
位 前 端 工程 师 ,， 已 经 用 
Bootstrap 创 建 了 几 个 网 
站 …… 他 认为 是 我 的 那儿 
篇 博文 引领 他 结识 了 强 
大 优雅 的 Bootstrap。 现 
在 ， 我 把 你 交 给 他 ， 让 他 
为 你 展示 Bootstrap 的 魔 
法 ， 我 们 一 块 推动 Web 开 
发 问 前 进 。 
Dave Winer 
Scripting News 求 志 编 辑 
Jake Spurlock 是 MakerMedia 
有 的 开发 者 ，MAKE 灯 志 的 制 
作 人 ， 他 发 起 了 全 球 各 地 
的 “ 制 汇 节 ”活动 ， 该 活 
动 旨 在 教会 人 们 动手 制 
作 ， 让 世界 变 得 更 美好 。 
Jake 是 犹他 州 人 ， 一 年 半 
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最 前 沿 的 上 T 类 电子 书 发 售 平 全 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹 
了 豫 簿 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM -free 的 阅读 
体验 : 在 线 阅 读 和 PDF。 


相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 米 用 了 彩色 图 片 (即使 
有 的 书 纸 质 版 是 黑 日 印刷 的 ) 。 读 着 还 可 以 方便 地 进 
(188. EEG. EDBURUTTED. 


最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门 植 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 部 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 


图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 采 你 有 总 翻译 娜 本 图 书 ， 欢 迎 你 来 社区 
申 语 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 新 力 的 。 


欢迎 加 入 


RREK 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 横 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
快 的 速度 了 和 解 到 国外 最 新 撤 术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺 贼 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 
的 质量 。 


最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 协 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
银子 。 


你 可 以 积极 参与 社区 经 党 开展 的 访谈 、 审 读 、 评 选 
等 多 种 活动 ， 赢 取 积分 和 银子 ， 积 累 个 人 声望 。 


